时间戳

首页 > 解决方案 > 如何将 div 的背景与带有轻微色调的窗口背景颜色相匹配？

html - 如何将 div 的背景与带有轻微色调的窗口背景颜色相匹配？

问题描述

我正在做一个 web 项目，我想知道如何创建一个容器，它匹配一个彩色的复杂背景（并且在更改网站宽度和高度时同步），大小为 80% 宽和 80%高视口大小。

我是否创建一个具有透明背景的 div？以下是 Dribble 的几张照片，向您展示了我的意思。

例子

第二个例子

这就是我想要达到的目标。

更新 提供的答案，这是我到目前为止所做的（在Codepen上）：

* {
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

#on_top {
  position: absolute;
  width: 80vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: linear-gradient( 160deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 21%, rgba(0, 212, 255, 0.15) 100%);
  box-shadow: 0px 19px 35px -11px rgba(0, 0, 0, 0.44);
  box-shadow: 0px 19px 35px -11px rgba(0, 0, 0, 0.44);
}

.background {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.green-pics {
  grid-column: 1/3;
  grid-row: 1/4;
  background: white;
}

.yellow-pics {
  grid-column: 5/7;
  grid-row: 3/6;
  background: white;
}

.red-pics {
  grid-column: 4/5;
  grid-row: 3/6;
  background: white;
}

.green-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: 1/3;
  grid-row: 4/6;
  background: #6637cf;
}

.yellow-text {
  grid-column: 4/7;
  grid-row: 1/3;
  background: #0cdbfd;
}

.red-text {
  grid-column: 3/4;
  grid-row: 1/6;
  background: #d00c22;
}

.blue-text {
  grid-column: 5/7;
  grid-row: 6/9;
  background: #0055d2;
}

footer {
  grid-column: 1/5;
  grid-row: 6/9;
  background: grey;
}

.green-text p {
  font-size: 36px;
  justify-content: center;
  align-self: center;
  margin: 5px 5px;
  color: white;
}

.green-text button {
  justify-content: center;
  align-self: center;
  font-size: 26px;
  border: 2px solid white;
  border-radius: 15px;
  padding: 10px 40px;
  background: transparent;
  margin: 0.5rem 0.5rem;
  cursor: pointer;
}

a {
  color: white;
  text-decoration: none;
}
<div class="background">
  <div class="green-pics pics content"></div>
  <div class="yellow-pics pics content"></div>
  <div class="red-pics pics content"></div>
  <div class="green-text text content"></div>
  <div class="yellow-text text content"></div>
  <div class="red-text text content"></div>
  <div class="blue-text text content"></div>
  <footer></footer>
</div>

<!-- Your translucent container -->
<div id="on_top">
  <div class="background">
    <div class="green-pics pics content"></div>
    <div class="yellow-pics pics content"></div>
    <div class="red-pics pics content"></div>
    <div class="green-text text content">
      <p>Go to store</p>
      <button><a href="store.html">BUY</a></button>
    </div>
    <div class="yellow-text text content"></div>
    <div class="red-text text content"></div>
    <div class="blue-text text content"></div>
    <footer></footer>
  </div>
</div>

这就是我想要实现的目标：具有匹配背景的完全工作的网站（在 80x80 容器内）： 最终效果

标签： htmlcss

解决方案

您可以调整background容器的不透明度div。指定时background-color，您可以选择 6 位十六进制数或 8 位十六进制数。当您选择 8 位选项时，最后两位数字表示颜色的不透明度，从000% 不透明度到FF100% 不透明度。例如：#ffffff00表示不透明度为 0% 的#ffffff22白色，表示不透明度约为 13.28% 的白色。

然后，您可以创建一个白色背景，一侧不透明度稍强，另一侧不透明度稍弱linear-gradient。在 CSS 中生成渐变颜色的一个相当方便的网站是这里。

这是一个简单的例子，使用linear-gradientandbox-shadow来创建你想要的效果。

* {
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}

#background {
  width: 100%;
  height: 100%;
  background: no-repeat center url('https://wallpaperplay.com/walls/full/1/b/7/89060.jpg');
  background-size: cover;
}

#on_top {
  position: absolute;
  width: 80vw;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.2) 21%, rgba(180,255,255,0.15) 100%);
  box-shadow: 0px 19px 35px -11px rgba(0,0,0,0.44);
}
<div id="background"></div>

<!-- Your translucent container -->
<div id="on_top"></div>

推荐阅读