我正在尝试创建一个网站,其中可能存在多个流畅的背景部分,这些部分在移动设备,平板电脑和桌面设备(包括不同的分辨率)之间保持一致。背景是留在中心以覆盖整个区域,并在所有设备类型中以相同的比例显示。
我尝试过的事情是:background-position: cover
拉伸但是会随着显示器宽度而缩放,从而导致图像移动。
创建了一个背景包装器,内部部件的固定宽度大约为1920像素。高度将是固定的。
此时效果最好的是具有指定宽度的包装内的背景。
https://jsfiddle.net/dy6ab36y/
HTML:
<div class="background-wrapper">
<div class="background-inner"></div>
</div>
CSS:
.background-wrapper {
left: 0px;
top: 0px;
width: 100%;
height: 250px;
display: block;
overflow: hidden;
}
.background-inner {
width: 1920px;
left: 50%;
margin-left: -960px;
position: absolute;
height: 250px;
display: block;
background-position: 50% 50%;
background-size: cover;
}
有更有效的解决方法吗?
答案 0 :(得分:1)
HTML:
<div class="background-inner">
</div>
CSS:
.background-inner {
height: 250px;
width:100%;
display: table;
background-position: 50%;
background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
background-repeat: no-repeat;
}
答案 1 :(得分:1)
背景尺寸cover
仅在您想要拉伸background-image
时才有用。如果你打算把它放在一个固定大小的容器中,无论如何都没有必要做你正在做的事情。最好的解决方案可能很简单,就是在非相对单位中定义background-size
,例如px
。
所以解决办法就是以这样的方式修正宽度:
.background-wrapper {
left: 0px;
top: 0px;
width: 100%;
height: 250px;
display: block;
overflow: hidden;
background-color:#ccc;
background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
background-position: 50% 50%;
/* By defining this, your image _will_ be cut off when the screen is
* wider than 1920px, but since you don't want to stretch this would
* happen anyway. */
background-size: 1920px auto;
}
<div class="background-wrapper">
</div>
答案 2 :(得分:0)
您想要固定的图像高度还是总窗口高度的某个百分比? 你想要拉伸背景图像吗?
如果没有,你可以使用
background-size: auto 100%;