我希望在我的主页上有一个背景图片,它在桌面上是全宽的,但随着屏幕尺寸缩小,图像右侧的越来越少会消失(但总是显示左手边缘以及图像左侧的对象。)
我的CSS代码如下:
.sm-img-bg-fullscr {
background-position: 0% 0px;
background-size:auto;
width: 100%;
display: block;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background-repeat: no-repeat;
}
和调用此类的html如下;
<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">
我尝试调整背景大小变量和背景位置变量,但没有运气。使用的图像是1920 x 1080。
我想知道当屏幕宽度足够大时,CSS参数的哪些组合将允许显示完整图像,并且随着屏幕尺寸缩小,它会移除越来越多的图像右侧,只能使图像的左侧可见。
答案 0 :(得分:0)
background-position: center;
答案 1 :(得分:0)
为什么不使用媒体查询来调整某些屏幕尺寸的图像背景?
我们所做的只是调整background-position
。
body {
margin: 0; padding: 0}
*{
box-sizing:border-box}
.image {
width:100vw;
height:100vw;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size: cover
}
@media only screen and (min-width:1px) and (max-width:700px) {
.image {
background-position:left center;
}
}
&#13;
<div class="image">
</div>
&#13;
答案 2 :(得分:-1)
在CSS中试试这个
{background-size: auto;}
或使用max-width: ??.px