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

Question

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

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

Answer 1

You can set the image as a background image and set the size through 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;
}

Answer 2

:before /:after pseudo-element is an inline element by default, so setting width/height on this element is invalid
Just like you set width/height on a element
Set position: absolute; after this The display attribute of the element is calculated as the block value;
but the set width/height is for the anonymous replacement element generated by :before/:after, not the content
, so the size of the image has no effect