Question

我最近切换到stellar.js添加了一些视差效果。我在container-fluid内有一个图像，但现在我正在使用部分和固定的背景附件。我正在使用img src=".." class="img-responsive"图像调整大小到视口。现在我的图像不会相应调整大小。我想要的只是视差，同时保持响应能力

HTML

<section class="intro" data-stellar-background-ratio="0.5"></section>

CSS

.intro {
    background: url("/img/banner-bg.jpg");
    background-repeat: no-repeat;
    height: 80%; 
    background-attachment: fixed;
    background-position: center center;
}

Answer 1

如果.intro部分为100％，则应使用css属性background-size：

.intro {
    background: url("/img/banner-bg.jpg");
    background-repeat: no-repeat;
    height: 80%; 
    background-attachment: fixed;
    background-position: center center;
    background-size:cover;
}

请注意，IE＆lt; 9不支持后台大小。请访问此处获取更多信息：http://caniuse.com/#search=background-size

糟糕的是，你不能使用背景尺寸：用背景附件封面：在手机游戏中修复。：（

使用部分时保持图像响应

1 个答案: