gpt4 book ai didi

html - 在 HTML 中显示图像的问题

转载 作者:搜寻专家 更新时间:2023-10-31 22:10:36 25 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body, html {
height: 100%;
width: 100%;
}

.top {
width: 800px;
margin: 0 auto;
}

.topfixedimg{
background-repeat: no-repeat;
background-size: cover;
background-image: url("image.jpg");
background-position: center;
background-attachment: fixed;
width: 100%;
height: 85%;
}


</style>
</head>
<body>
<div class="top">
<div class="topfixedimg"> </div>
</div>
</body>
</html>

如果我不在最外层“top”div 的 CSS 中添加 height 属性,上面的代码片段不会显示图像。

如果我添加高度,它会正确显示图像。

它不应该从内部 div 元素的 CSS 中获取高度并仍然显示图像,即使最外层 div 元素的 CSS 中没有高度属性吗?

最佳答案

85% height 表示父高度的 85%。由于您没有为外部 div 指定任何高度,因此它的高度为 0px,因此 0 的 85% 为 0。

要么指定父级的高度,要么指定内部div的高度,单位为px、em、rem等

#outer {
width: 100px;
height: 100px;
background: red;
}

#inner {
width: 100px;
height: 50%;
background: green;
}
<div id="outer">
<div id="inner"></div>
<span>I'm just another element</span>
</div>

关于html - 在 HTML 中显示图像的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48295465/

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