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


赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)