Question

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

我的问题是边界背景，我设置为img.bg，基本上我试图交换图像并替换为img.bg2＆amp; 3当尺寸达到标准屏幕尺寸时。为此，我使用style.css中的visibility属性。我有点工作，现在它完全混乱，任何帮助和/或建议将不胜感激！

我在网上发布了最新的例子：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

同意tehAon，你已经使整个事情变得复杂了！

background-size:cover;

新的CSS3属性。将始终用图像覆盖指定的元素。无论屏幕尺寸如何。

Answer 3

所以，我也读了这篇文章，这篇文章很好：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上看到该网站，感谢您对此提供的任何帮助！感谢

响应式网站的背景大小调整

3 个答案: