gpt4 book ai didi

html - CSS3 背景尺寸 :cover showing unexpected behavior

转载 作者:太空宇宙 更新时间:2023-11-04 15:21:37 24 4
gpt4 key购买 nike

我有一个 HTML 文件,如下所示。它在元素上使用“background-size:cover”设置。

当我在 IE9 上使用“文件/打开”选项打开文件时,它会显示覆盖整个窗口的背景图像。这是预期的行为。

但是,当我通过 Apache 服务器 (http://127.0.0.1/test.html) 打开同一个文件时,背景图像并没有水平覆盖整个窗口......它在窗口的右端。这不是预期的行为。

我也看到其他背景图像文件有相同的行为。似乎从 Apache 服务器获取 HTML 页面时,“background-size:cover”设置只会将图像放大到一定程度。但是当使用文件/打开选项获取它时,它会将背景图像放大到足以覆盖整个元素宽度。

并且,还可以看到与背景大小值的其他设置类似的行为(例如,当我设置背景大小:100% 100%;)。

这是 HTML 文件:

<html>
<head>
<style>
body
{
background:url('desert.jpg');
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>

<body>

This is a line


</body>
</html>

最佳答案

试试这段代码,它应该可以解决您的问题:

<style>
body
{
background: url("desert.jpg") center center fixed no-repeat;
background-size: cover;
background-color: #000;
overflow: auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale')";
}
</style>

Image如需进一步解释,请阅读这篇文章:http://cookbooks.adobe.com/post_scale_background_image_to_browser_size-17590.html

关于html - CSS3 背景尺寸 :cover showing unexpected behavior,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14517375/

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