Html 无背景附件缩放背景图像:修复?
我正试图找出使背景图像完全响应的最佳方法-到目前为止,我能找到的最佳方法是使用背景大小:封面,正如大多数人倾向于建议的那样,但使用背景附件:固定,以便图像随着屏幕大小的调整而缩小其比例,否则它只会保留原来的比例,根本无法缩放。仅使用背景大小:封面拉伸图像以填充容器div,但不会自动缩放比例 然而,我不希望固定背景的效果在你向下滚动时隐藏图像的一部分,我更希望它是背景附件:滚动,但我不能让它工作,并使其缩放 所以我的问题是:有没有任何我不知道的方法可以让背景图像自动缩放屏幕大小,而不必使用背景附件:固定来实现它 请查看我的JSFIDLE以了解我目前的情况: (是的,我也知道我需要在某个时候使用媒体查询来为各种屏幕大小提供优化的图像) 我当前的代码如下所示:Html 无背景附件缩放背景图像:修复?,html,css,responsive-design,background-size,background-attachment,Html,Css,Responsive Design,Background Size,Background Attachment,我正试图找出使背景图像完全响应的最佳方法-到目前为止,我能找到的最佳方法是使用背景大小:封面,正如大多数人倾向于建议的那样,但使用背景附件:固定,以便图像随着屏幕大小的调整而缩小其比例,否则它只会保留原来的比例,根本无法缩放。仅使用背景大小:封面拉伸图像以填充容器div,但不会自动缩放比例 然而,我不希望固定背景的效果在你向下滚动时隐藏图像的一部分,我更希望它是背景附件:滚动,但我不能让它工作,并使其缩放 所以我的问题是:有没有任何我不知道的方法可以让背景图像自动缩放屏幕大小,而不必使用背景附件
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
@include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
html,
身体{
@包括框尺寸(边框框);
身高:100%;
}
分区,
身体{
保证金:0;
填充:0;
}
身体{
显示:块;
背景色:#000000;
}
.页面包装器{
利润率:0-900;
最小高度:100%;
高度:自动;
}
* {
保证金:0;
填充:0;
}
标题{
显示:块;
宽度:100%;
高度:1200px;
}
.启动bg{
高度:1200px;
背景图像:url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
背景重复:无重复;
背景附件:固定;
背景位置:中心;
背景尺寸:封面;
}
.页脚{
高度:900px;
填充:6%0;
颜色:$白色;
背景图像:url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
背景重复:无重复;
背景附件:固定;
背景位置:中心;
背景尺寸:封面;
}
我认为,这里有一个简单的例子,说明了您的要求,为了清晰起见,我们将其全部删减:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
后台附件的初始值是scroll-它不需要声明。这就像说:
div{display:block;}
此外,背景大小
不(也不会)与任何背景附件一起工作:已修复。相关:background attachment:scroll
是多余的-scroll
已经是background attachment
的CSS中的初始值,我将其包括在内,以确保他知道不要使用固定值或其他值,比如在他的小提琴中。但还是要指出。不幸的是,这不是我想要的。。。这会使图像拉伸过多(在我的屏幕上不合适),并且不再缩放。。。正如我所说,我已经尝试使用背景附件:滚动封面属性。。。