[英]how to set background image to pseudo elements using percent instead of pixel?
關鍵的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;
}
我想在使用pseudo :before
之后立即在寬度為100%,高度為100%的灰色框內設置背景圖像
編輯
我想這樣
但不是這樣
還是不喜歡這樣
現在您可以編寫此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;
}
演示2 Background-size:cover
請使用此代碼
.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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.