伪元素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;
}

推荐阅读：

申请腾讯云免费SSL证书，实现网站https访问

Linux下导入SQL文件及MySQL常用命令

新网站如何做好SEO优化 尽快被收录

Z-Blog 搜索报错：Cannot pass parameter 1 by reference 解决方法

使用 swiper 轮播插件遇到的问题及解决方法