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

你可以把圖片設為背景圖片，透過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偽元素預設是行內元素，所以這個元素設定width/height是無效的
就像你對a元素設定width/height一樣
設定position: absolute;後這個元素的display屬性計算為block值；
但是設定的width/height針對的是:before/:after產生的匿名替換元素，而不是其中的content
所以圖片的大小是沒有效果的