如何将我的'：after'背景图像居中？

Question

我有一个背景图像，涵盖浏览器的整个宽度和高度。 在较小的屏幕上打开html文件时，只能看到图像的左侧。

我想要的是在背景上缩放和居中图像。 我的css代码有什么变化？

div#background-content {
    position: relative;
}

div#background-content:after {
    background-image:url('./images/sunrise.jpg');
    opacity:0.7;
    width: 100%;
    height: 100%;
    background-size:cover;
    display:block;
    content : "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Answer 1

你可以在你的CSS中添加这段代码：

 div#background-content:after {
    background-size:contain;
    background-position:center;
    }

Answer 2

CSS 背景位置 ：

background-position: center;

Answer 3

添加背景位置：中心; 我推荐你使用background:url('./images/sunrise.jpg') no-repeat center;

Answer 4

div#background-content:after{
   background-position: 50% 50%;
   background-size: cover;
   background-repeat: no-repeat;
}

Answer 5

div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-position: left -206px top -95px !important;
background-size: 320% 110% !important;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;

}