gpt4 book ai didi

javascript - 使背景图像响应 - fullpage.js

转载 作者:行者123 更新时间:2023-11-29 10:43:03 24 4
gpt4 key购买 nike

我正在使用 fullpage.js 进行视差滚动。当我 re-size 我的 window 时,是否有可能使背景图像 responsive 本质上。

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

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

如果您注意到我的每个 section 都有 background-size 属性和 cover,但是当我 时它仍然没有响应调整大小

#section0,
#section1,
#section2,
#section3{
background-size: cover;
}

最佳答案

看来我对 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>

关于javascript - 使背景图像响应 - fullpage.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25042930/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com