我在平板电脑上用首页背景(图片)遇到了这个错误/问题。 在笔记本电脑屏幕或更大的屏幕上,一切都很好。在移动设备上也可以。 但是,从平板电脑加载网站时,我的背景看起来很奇怪。 图像就像整个首页的中心。 在图像的左,右,上和下侧均显示此空白区域。就我而言,它们是黑色的。
我正在测试的表格具有以下宽度(在横向视图中):1112px,1280px。
以下是背景的CSS:
element.style {
margin: 0 auto;
background: url(https://test.me/images/bg-image-1-1920x1280.jpg) no-
repeat fixed right;
background-size: contain;
}
有人可以告诉我我想念什么吗?
谢谢
PS-我忘了提到笔记本电脑的屏幕截图,实际图像是右调整的,而左侧则是黑色背景。我的意思是,实际图像不在全屏上。
更新: 伙计们,我已经尝试了所有建议,但似乎并没有达到我想要的效果(笔记本电脑的屏幕截图)
答案 0 :(得分:-1)
我只是将background-position **fixed right**
更改为**center center**
,然后将background-size: contain
更改为background-size: cover
,希望对您有所帮助。谢谢
.bg {
background: url(https://images4.alphacoders.com/279/279526.jpg) no-repeat center center;
margin: 0 auto;
background-size: cover;
height: 100vh;
width: 100%;
}
<div class="bg"></div>