Question

我正在使用fullpage.js进行视差滚动。当我responsive re-size window时，是否可以制作背景图片section。

https://github.com/alvarotrigo/fullPage.js

以下是我正在使用的示例。 https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html

如果您发现我的每个background-size都有cover属性re-size，但在我#section0, #section1, #section2, #section3{ background-size: cover; }时仍然没有响应。

{{1}}

Answer 1

看，我对 fullpage.js 了解得太多了但我不知道根据你的窗口大小调整图像大小..... 首先下载任何图像，我将其命名为sa.jpg

<html>
    <head>
        <style type="text/css">
        #box{   
            width:100%;
        }
        <!--This class is added to img element to make it responsive -->
        img.responsive{
            max-width:100%;
            height:auto;
        }
        </style>
    </head>

    <body>
         <div id="box">
             <img src ="sa.jpg" class="responsive"></img>
         </div>
    </body>
</html>

在上面的代码中，我们将图片保存在 #box div中。我们还为img元素添加了响应命名类。将其指定为最大宽度值100％。这允许宽度调整到浏览器宽度的变化。接下来，向类添加动态高度属性。

以上代码对img元素有响应..

现在，如果您想使用背景图像css属性并根据屏幕大小调整图像大小

<html>
    <head>
        <style style type="text/css"> 
        #box{   
            width:100%;
            height:100%;
            background-image:url("sa.jpg");
            background-size:100% auto;
            background-repeat: no-repeat;
        }
        <!--img.responsive{max-width:100%;height:auto}-->
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

Answer 2

这个最适合我

background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;

使背景图像响应 - fullpage.js

2 个答案: