我一直在尝试对图像进行嵌入模糊,根据我的阅读,有两种常见的方法可以做到这一点。两种方法我都试过了。
我现在所拥有的是,我将图像包裹在一个 div 中,并试图使用 z-index 将具有模糊效果的 div 放置在图像上方,但是,我根本看不到该 div。
#mainpicdiv {
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
width: 100%;
margin-top: 3%;
position: relative;
z-index: 1;
}
#mainpic {
width: 100%;
margin-top: 3%;
margin: 0 auto;
padding: 0%;
position: relative;
z-index: -2;
}
最佳答案
您可以通过将完整高度和宽度的伪元素添加到包裹图像的 div 来执行此操作。 img
标签不支持框阴影
#mainpicdiv {
position: relative;
}
#mainpicdiv:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
}
#mainpicdiv > img {
width: 100%;
display: block;
}
关于css - 插图模糊不起作用? CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45706577/