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


推荐阅读:

3.29 PHP基础知识 标记的5种写法、注释、命名规则等

CSS中的background属性与margin和padding内外边距的关系总结

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

SQL语句的基本命令总结

找回Windows Server&Windows10 ltsb 图片查看器

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

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