如何使用百分比而不是像素将背景图像设置为伪元素? [英] how to set background image to pseudo elements using percent instead of pixel?

问题描述

.tab-contents{背景:#2b2a26；填充:0px 8px；清楚:两者；}#标签{边框折叠:分开；边框间距:4px 0;浮动:对；列表样式:无外无；边距:0 -4px 0 0；填充:0；}#tabs li {背景:无重复滚动 0 0 #000000；边框半径:19px 19px 0 0;显示:表格单元格；高度:47px；边距:0 4px；文本对齐:居中；垂直对齐:中间；宽度:145px；}#tab-1 {位置:相对；}#tab-1:之前{内容: "";显示:块；宽度:calc100%；高度:200px；背景: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") 不重复；顶部:10px；左:0;背景尺寸:封面；位置:相对；}

demo

the key 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;
}

I wanted to set background-image inside gray-colored box with 100% width and 100% height right after using pseudo :before

edit

I want to do like this

but not like this

Or not like this

解决方案

please use this code

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;

}

这篇关于如何使用百分比而不是像素将背景图像设置为伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！