在我的网站上:我使用了一些@media
个查询来获得不同解决方案的不同背景。我现在的问题是,如果你将窗口拖动到1080p高,但是例如只有1024,你会在顶部和底部看到白色边框。
这是正常的,因为图片是为768p高而设计的,所以不是问题。
因为我没有添加容器因为对我来说很难,所以我决定在我的背景图片上做容器。由于这个事实,我需要使用“固定”的背景,以便它与网站的响应式设计进行扩展并保持匹配。
现在我的问题是,有没有办法解决白条问题?它并不是什么大不了,因为你没有看到它们如果你的分辨率适合但我不想做例如1024x1200图片只是为了匹配高度。我很确定这样的图片在1024x768的屏幕上看起来很差。
以下是我正在使用的代码:
/* 1680x1050 ----------- */
@media only screen and (min-width : 1601px) and (max-width : 1680px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1680x1050.jpg');
margin: 0;
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:fixed;
overflow: auto;
background-position:center;
background-attachment:fixed;
}
}