伪元素content属性为图片时不能设置尺寸的解决方法

大家应该知道，伪元素的 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