demo 如何使用百分比而不是像素將背景圖像設置爲僞元素？

密鑰CSS

#tab-1:before { 
    content:""; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat; 
    top: 10px; 
    position: relative; 
}

我想設置內部灰色框用100％的寬度和100％的高度背景圖像使用僞:before

編輯

後右

我想這樣做

enter image description here

但不喜歡這個

enter image description here

還是不喜歡這個

enter image description here

來源

2013-07-30 Navin Rauniyar

你はnt它作爲父元素的背景？ – Cherniv

使用絕對位置並設置其父相對 – Hushme

位置如果有任何想法，我可以設置後的固定寬度和高度則：之前圖片應該100％ –

請使用此代碼

http://jsfiddle.net/YUj5W/4/

.tab-contents{ 
    background: #2b2a26; 
    padding: 0px 8px; 
    clear: both; 
} 


#tabs { 
    border-collapse: separate; 
    border-spacing: 4px 0; 
    float: right; 
    list-style: none outside none; 
    margin: 0 -4px 0 0; 
    padding: 0; 
} 
#tabs li { 
    background: none repeat scroll 0 0 #000000; 
    border-radius: 19px 19px 0 0; 
    display: table-cell; 
    height: 47px; 
    margin: 0 4px; 
    text-align: center; 
    vertical-align: middle; 
    width: 145px; 
} 
#tab-1 {position:relative;} 

#tab-1:before{ 
    content: ""; 
    display: block; 
    width: calc100%; 
    height:200px; 
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat; 

    top: 10px; 
    left:0; 
    background-size:cover; 
    position: relative; 

}

來源

2013-07-30 06:33:21 Hushme

太棒了！但是我可以用固定寬度包裝該圖像嗎？但之前沒有用過。 –

是的，你一定可以 – Hushme

我要這個'

here the :before image should come

' –

現在你可以這樣寫CSS

#tab-1{ 

position: relative; z-index:1; 
} 
#tab-1:before{ 
    content: ""; 
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat; 
    top: 10px; 
    position:absolute; 
    left:0;right:0;top:0;bottom:0;z-index:-1; 

}

Demo

======================

Demo 2隨着Background-size:cover

來源

2013-07-30 06:56:06

太棒了！但如何將該圖像放在該段落上方並在灰色框內 –

http://jsfiddle.net/YUj5W/7/這是我喜歡做的事情，但圖像的高度不應該增加。怎麼做？ –

@NavinRauniyar喜歡這個http://jsfiddle.net/YUj5W/8/ –

如何使用百分比而不是像素將背景圖像設置爲僞元素？

回答

======================

相關問題