Question

我正在研究一个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>

这就是我想要实现的：具有完全匹配的背景的完全可用的webiste（在80x80容器内部）：

Answer 1

您可以调整容器background的{{1}}的不透明度。指定div时，您可以选择6位数的十六进制数字或8位数的十六进制数字。当您选择8位数字选项时，后两位数字代表颜色的不透明度，从background-color表示0％不透明度到00表示100％不透明度。例如：FF表示不透明度为0％的白色，而#ffffff00表示不透明度为13.28％的白色。

然后，您可以使用linear-gradient创建白色背景，其一侧的不透明性稍强，而另一侧的不透明性稍弱。 here是一个在CSS中生成渐变颜色的便捷网站。

这是一个使用#ffffff22和linear-gradient来创建所需效果的简单示例。

box-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的背景与其窗口背景色略带色相匹配？

1 个答案: