如果我的背景图像在所有设备上都没有响应怎么办

Question

我正在制作我的作品集，但我卡住了。我只是小看了它……它应该是什么样子。我开始在我的 PC 上测试它没问题...正是我想要的...然后我开始在我的 iPad 上测试它并且 BACKGROUND-IMG 不适合但在我的 Sony Xperia 手机上它没问题就像在我的电脑上一样。你能帮我么？谢谢 ---> link 到测试网站：http://marten.esy.es/ 我希望有人能帮助我 :) 祝你有美好的一天！

Answer 1

有几件事。我会从幻灯片 1 的背景中删除固定位置。然后将背景大小的属性更改为覆盖。这允许您为每个媒体查询设置高度。我还建议添加 background-position: center;因此图像始终位于相对于 div.

的中心

.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat;
color: #fff;
height: 400px;
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;

}

Answer 2

据我所知，在查看示例后，我认为问题出在整个视口的背景覆盖上。如果是这样，请为您的 .slide1 元素使用以下样式。

.slide1 {
    background: url('mountainsmorning.jpg') 50% 0 no-repeat fixed;
    color: #fff;
    /* height: 400px; */
    margin: 0;
    padding: 25% 0 30% 0;
    background-size: cover;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

注意：并且在针对多种屏幕尺寸进行开发时不要使用固定的高度或宽度。其他的还好。

如果我的背景图像在所有设备上都没有响应怎么办

What to do if my Background-img is not responsive on every device

css

background

background-image

ios

responsive-design