我有一个背景图片,涵盖浏览器的整个宽度和高度。在较小的屏幕上打开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;
}
答案 0 :(得分:2)
您可以在css中添加此代码:
div#background-content:after {
background-size:contain;
background-position:center;
}
答案 1 :(得分:1)
CSS background-position:
background-position: center;
答案 2 :(得分:0)
添加background-position:center;
我推荐你使用background:url('./images/sunrise.jpg') no-repeat center;
答案 3 :(得分:0)
div#background-content:after{
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
答案 4 :(得分:0)
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;
}