Javascript 将一个div元素包含在另一个div元素中会破坏视差效果_Javascript_Html_Css

Javascript 将一个div元素包含在另一个div元素中会破坏视差效果

javascript html css

Javascript 将一个div元素包含在另一个div元素中会破坏视差效果,javascript,html,css,Javascript,Html,Css,这是w3schools的原始工作示例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; } .parallax { /* The image used */ background-image: u

这是w3schools的原始工作示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('img_parallax.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

<div class="parallax"></div>

</body>
</html>

为什么会这样？

有没有办法使用百分比来获得视差效果，即使是在另一个div元素中，如图所示？

这很简单。您正在将

的高度设置为没有身高的家长的高度。所以，没有身高的孩子

这就是为什么当你把它设置为像素时它会工作的原因。明白了吗

如果需要帮助，请输入更多详细信息

只要你的“为什么”，答案就在这里。

很简单。您正在将

的高度设置为没有身高的家长的高度。所以，没有身高的孩子

这就是为什么当你把它设置为像素时它会工作的原因。明白了吗

如果需要帮助，请输入更多详细信息

只要你的“为什么”，答案就在这里。

这是直截了当的

为什么它使用的是

px

值而不是百分比

值

这是因为当设置一个百分比值时，浏览器将根据其父元素的高度计算元素的高度，因此您将div包装在一个

height

one中，因此

height:100%

将不起作用div在那里，但它没有高度，因此它不会显示

它首先起作用是因为它的父对象是身体，它的高度为

height:100%

意味着获取它的父对象的高度，也就是html，它的高度为

height:100%

，从视口获取它的高度。