如何使伪元素的背景图像拉伸以适合宽度？

Question

我正在尝试在图像上覆盖一些文本，并使背景图像0.2透明。 现在我的问题是：如何使伪元素的背景图像拉伸以适合宽度或裁剪图像以适合屏幕（不使图像变形）？ 在此处在codepen上编辑代码。

CSS：

#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

的HTML：

<div id="main">
  Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
</div>

Answer 1

您可以使用此：

#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;

background-size: 100% 100%;    /* added*/
background-repeat: no-repeat;  /* optinal*/

}

或像这样的一行语法：

background-size: auto|length|cover|contain|initial|inherit;

有关更多详细信息， 请单击。

Answer 2

尚不清楚您要做什么，但是您可以尝试添加background-size:cover ，如下所示：

JS小提琴

的CSS

#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
    background-repeat: no-repeat;

    background-size: cover;
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;

}