Question

我的问题是：

是否有可能制作响应式背景？我的意思是如果有可能，如果我从手机（例如840px宽度）访问我的网站，我的背景将自动适合我的屏幕，但我网站上的其他内容将具有相同的大小？而另一个问题是，如果我可以阻止它...让我们说1920px宽度？

我还没有真正的代码。我只想问。谢谢你的回复。

Answer 1

您可以使用

.class{background-size:auto auto;}
@media screen and (max-width 1920px){
    .class{background-size:100% auto;}
}

Answer 2

很难完全理解你在这里要求的东西，但是一般的建议：试试css属性background-size: cover。这将使您的背景图像占据其容器的整个宽度和高度，保持纵横比并根据需要在任一方向进行裁剪。

它非常聪明，并且具有非常好的浏览器支持。更多信息可以在以下链接中找到：

参考：CSS-Tricks: Perfect Full Page Background Image

Answer 3

您可以为100％宽度/高度的“背景”图像应用固定包装。 Tha bakground应该用作普通图像，根据它的父包装器调整大小。内容可以在覆盖前一个的另一个包装内。

Answer 4

您可以使用css后台覆盖属性，因为这会自动调整图片大小以适合浏览器。如果您甚至可以使用媒体查询来提供不同大小的图像，那么它将占用更少的带宽并且看起来更好

html,body{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;
}

如何制作响应背景？

4 个答案: