大家应该知道,伪元素的 content
属性不仅可以设置文字数字等,还可以引入图片。代码如下:
div::before{
content: url('img.png');
display: block;
width: 100px;
height: 100px;
object-fit: fill;
}
我给 content
引入了一张图片,并设置了 object-fit: fill
让图片“填充”整个容器,但是发现并没有什么卵用,也就是说不能设置该图片的尺寸,这可怎么办呢?
其实伪元素的 content
属性引入的图片之所以不能设置尺寸,是因为 object-fit
是图片 img
的样式,伪元素虽然可以设置图片,但毕竟不是 img
,而且 JavaScript 也不能直接操作伪元素。
可以用下面的背景图片方式,用 background-size: cover
来设置图片的显示方式:
div::before{
content: '';
display: block;
width: 100px;
height: 100px;
background:url('img.png')
background-size:cover;
}
声明:本文由w3h5原创,转载请注明出处:《伪元素content属性为图片时不能设置尺寸的解决方法》 https://cloud.tencent.com/developer/article/1537959