css - 伪类before/after中的图片大小是不是不能设置的?-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 伪类before/after中的图片大小是不是不能设置的?

大家讲道理 2017-04-17 11:32:20

[CSS3讨论组]

1282

    #center_box:before{
        content:url(http://localhost/quding/photos/u14.png);
        position: absolute;
        width:1000px;
        height:200px;
        z-index: 100;
        top: -110px;
    }

随我怎么调width,height都没变化.

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(2)

大家讲道理2017-04-17 11:34:20 2楼

你可以把图片设为背景图片，通过bakckground-size来设置大小

#center_box:before{
    content:'';
    background-image:url(http://localhost/quding/photos/u14.png);
    background-size:1000px 200px;
    position: absolute;
    width:1000px;
    height:200px;
    z-index: 100;
    top: -110px;
}

赞 +0

添加回复

大家讲道理2017-04-17 11:34:20 1楼

:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的
就像你对a元素设置width/height一样
设置position: absolute;后这个元素的display属性计算为block值；
但是设置的width/height针对的是:before/:after生成的匿名替换元素，而不是其中的content
所以图片的大小是没有效果的

赞 +0

添加回复