在网页设计中,我们常常需要使用蒙版来增强页面的美观性和交互性。蒙版是一种遮罩层,可以在一个元素上覆盖一层半透明的颜色或图片。在CSS中,我们可以使用伪元素和兄弟选择器来实现蒙版效果。首先,我们需要为目
<style> .overlay { position: relative; } .overlay::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } </style> <div class="overlay"> <img src="image.jpg" alt="Image"> </div>
<style> .overlay { position: relative; } .overlay img { position: relative; z-index: 2; } .overlay::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-image: url(mask.png); background-size: cover; background-repeat: no-repeat; opacity: 0.8; } </style> <div class="overlay"> <img src="image.jpg" alt="Image"> </div>
粉丝
0
关注
0
收藏
0