Question

我有一个动画背景（背景），背景颜色（A）上的div和其中的另一个div（B）。我希望B是透明的，所以通过它我们看到了动画背景，但是B在A中，它已经有了背景色。

实现这一目标的任何想法？

Answer 1

所以听起来你有三层：背景，Div A和Div B. Div A + B需要透明才能看到动画背景。您是否尝试过使用CSS属性＆＃34;不透明度＆＃34;？

div {
    opacity: .3; /* Anything betweet 0 - 1 */
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

查看此内容，了解有关不透明度https://www.w3schools.com/css/css_image_transparency.asp

的更多信息

Answer 2

你可以使用CSS clip-path属性实现这一点，只要你只想让'B'成为'A'的剪切，在这种情况下你根本就不需要'B'。

HTML：

<div class="animated-bg">
  <div class="inner-a">
  </div>
</div>

CSS：

.animated-bg {
  background-image: url(http://www.animateit.net/data/media/august2009/twi.gif);
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inner-a {
  background-color: white;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

否则，如果你想要'B'来保存某些东西，例如文字，你可以将它绝对定位在剪裁的'A'后面并给它一个透明的背景。

这样的事情：

HTML

<div class="animated-bg">
  <div class="inner-b">
    hello
  </div>
  <div class="inner-a">
  </div>
</div>

CSS：

.animated-bg {
  background-image: url(http://www.animateit.net/data/media/august2009/twi.gif);
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inner-a {
  position: absolute;
  background-color: white;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
  z-index: 2;
}

.inner-b {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  position: absolute;
  background: transparent;
  z-index: 1;
  color: white;
  text-align: center;
  line-height: 300px;
}

Clippy非常适合制作合适尺寸的剪辑：http://bennettfeely.com/clippy/

小提琴第一个例子：https://jsfiddle.net/fjr7qvcm/1/
小提琴第二个例子：https://jsfiddle.net/fjr7qvcm/4/

Answer 3

你不能使用像面具这样的div来隐藏其父级的背景。因此，您可以将background-color的{{1}}更改为div.A，以便您可以获得透明效果，如下例所示

border

.out {
  background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
  height: 200px;
  padding: 30px;
}

.A {
  border-style: solid;
  border-color: red;
  border-width: 20px 40px 20px 40px;
  height: 100px;
}

.B {
  background: transparent;
}

如何使元素透明，使其背景为2层？

3 个答案: