我正在页面上显示图像,我希望添加一个蒙版以实现特定的边界和角落效果。
为此,我希望以下列方式使用伪元素:
img
{
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
&:after
{
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
但是面具图像永远不会出现。我还尝试添加一个负的左边距和上边距,以便将伪元素“拉”回<img>
,但仍然没有。
我的CSS中是否存在明显的错误,或问题是伪元素的固有限制?
答案 0 :(得分:2)
默认情况下, img 标记是一个内联元素,它不是在伪类之后添加的容器。我会建议以下代码:
div.container {
img {
display: block;
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
}
&:after {
display: block;
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
请注意,伪类也是一个块元素。