gpt4 book ai didi

html - 无法将完整图像显示为 css 背景

转载 作者:行者123 更新时间:2023-11-28 08:46:38 25 4
gpt4 key购买 nike

我有一张大图片,我想为 div 使用背景。我想在不缩放和裁剪的情况下显示完整的图像。试过这段代码,但它不工作。我在这里错过了什么?

<html>
<head>
<style type="text/css">
body {height:100%; overflow-y:hidden;}
.bgimg {
background-image: url(DSC_0076.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
width: 100%;

}
.txt{
padding-top: 200px;
padding-right: 100px;

text-align: right;
}
</style>
</head>
<body>
<div class="bgimg">
<h1 class="txt">
Dummy Text
</h1>
</div>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<footer>
<p>This site is under construction, please wait for some time for the details.</p>
</footer>
</body>
</html>

这是它的显示方式: enter image description here

但是实际图像是这样的: enter image description here

最佳答案

您的 CSS 需要一些工作,因为如果未设置 HTML 高度,具有 100% 高度的正文将毫无意义。你基本上是在说;使我的 body 占据其容器的 100%,即 HTML,但默认情况下 HTML 是自动的,并且仅大到足以容纳内容,除非您在 html 上指定 100% 高度,否则有效地使 body 上的 100% 高度变得毫无值(value)好吧,它占用了浏览器窗口。

此外,您身上的溢出物可能会导致裁剪。

html, body { height: 100%; }

如果你想让背景图片完整显示,你需要让容器和背景一样大。背景图像永远不会调整其设置的容器的大小。只是不能那样工作。

关于html - 无法将完整图像显示为 css 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27554648/

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