我有以下标记
<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.jb51.cc/html/231649.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
