jquery - 响应式网站的背景大小

Question

提前感谢您的耐心，我对此有些陌生，我的代码仍在开发中。我试图建立一个响应式投资组合网站，我拼凑了一个响应式画廊，导航到移动下拉菜单和一个带边框的背景，应该使用媒体查询进行调整，定位在导航下方但围绕画廊。

我的问题是带边框的背景，我已将其设置为 img.bg，本质上是当尺寸达到标准屏幕尺寸时，我试图交换图像并用 img.bg2 和 3 替换。为此，我使用了 style.css 中的可见性属性。我让它工作了一些，现在它完全混淆了，任何帮助和/或建议将不胜感激！

我在网上发布了我的最新示例：www.ververserver.com

干杯。

Answer 1

听起来您可能试图使这一点复杂化。你可以使用 CSS3 吗？他们添加了一个名为 background-size 的新属性，可以拉伸和缩小您的图像。

这是一些信息的链接 http://www.css3.info/preview/background-size/

同样来自 w3cschools：http ://www.w3schools.com/cssref/css3_pr_background-size.asp

浏览器支持：“IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 支持 background-size 属性。”

Answer 2

所以，我也读了这篇文章，这很好：http ://css-tricks.com/perfect-full-page-background-image/

我想出了一个解决方案，它似乎在 500px 和 1824px 处有效，但在 1024px 处，背景图像变得比原始文件大得多，这是我目前在 drop-basic.css 文件中的代码：

body { 
background-image: url("images/SQlarge.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen 
and (max-width : 1024px) 
{
body { 
background-image: url("images/SQ1024.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}
}

@media only screen 
and (max-width : 500px) 
{
body { 
background-image: url("images/SQmobile.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}
}

img, audio, video, canvas { max-width: 100%; }

.container { 
    max-width: 80em;
    width: 88%;
    margin-left: auto; 
    margin-right: auto;
}

您可以在 www.ververserver.com 上查看该站点，感谢您对此提供的任何帮助！谢谢

Answer 3

同意tehAon，你把整个事情复杂化了！

background-size:cover; 

新的 CSS3 属性。将始终用图像覆盖指定元素。不管屏幕大小。