Question

这是我的代码，你可以看到 body 有一些背景图片， #cont 应该是白色的。但是我希望我的 div 元素透明，我可以看到身体背景图像。任何可以做到这一点的CSS技巧？

body {
  margin: 0;
  border: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-image: url(image.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#cont {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: white;
}
#cont div {
  margin: 20px;
  border: 1px solid gray;
  padding: 0;
  width: 50px;
  height: 50px;
  float: left;
}

<div id="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

这里是更新的代码段：

body {
  margin: 0;
  border: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-image: url(https://placekitten.com/1000/1000);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /*include this*/
  background-attachment: fixed; /*include this*/
}
#cont {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: white;
}
#cont div {
  margin: 20px;
  border: 1px solid gray;
  padding: 0;
  width: 50px;
  height: 50px;
  /*float: left; replaced by display inline-block*/
  display: inline-block; /*include this*/
  background: url(https://placekitten.com/1000/1000) center center no-repeat; /* <<< same body image*/
  background-size: cover; /*include this*/
  background-attachment: fixed; /*include this*/
}

以下是完整示例：jsbin

Answer 2

您可以在div元素中添加背景图像，并使用背景位置进行渲染以获得透明的幻觉。

如果你正在使用JavaScript，你可以获得元素的x / y位置并动态调整css。

Answer 3

检查： -

body {
  margin: 0;
  border: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#cont {
  margin: 0;
  border: 0;
  padding: 0;
  opacity: 0.3;
}
#cont div {
  margin: 20px;
  border: 1px solid gray;
  padding: 0;
  background-color: white;
  width: 50px;
  height: 50px;
  float: left;
  background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
  background-attachment: fixed;
  background-position: top center;
}

<div id="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS背景剪切

3 个答案: