html – 将div变为透明以查看两个容器

前端之家收集整理的这篇文章主要介绍了html – 将div变为透明以查看两个容器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下标记
<body>
   <div class="holder">
      <div class="circle"></div>
   </div>
</body>

并且我已经将固定的背景应用于身体元素和应用于类持有者的白色背景

body {
    background: url(image.png);
    background-attachment: fixed;
}

.holder {
    width: 500px;
    height: 500px;
    background: #fff;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0,0);
}

我试图做的是使圆圈透明,以查看身体背景.简单地说,我正在尝试的是,使圆圈透明以查看身体背景图像,同时圆圈周围的白色背景仍然存在.请原谅我的英语.伙计们请帮帮我.

解决方法

您要求做的事情不会使用透明度.

但是,有一种解决办法是完全可以接受的:

body {
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}
.holder {
    width: 500px;
    height: 700px;
    background: rgba(255,255,0.8);
    border: 1px dotted blue;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}

见演示:http://jsfiddle.net/audetwebdesign/FqMXz/

只需将相同的背景图像应用于.circle div即可.

这个技巧来自Eric Meyer的一本CSS书籍.

原文链接:https://www.f2er.com/html/231649.html

猜你在找的HTML相关文章