gpt4 book ai didi

html - 页面背景图片到封面无法正常工作

转载 作者:行者123 更新时间:2023-11-28 13:12:31 25 4
gpt4 key购买 nike

我有这张图片:

enter image description here

我试图拉伸(stretch)页面的高度,然后水平重复。水平重复工作正常,但它没有垂直覆盖页面。

我已经尝试了 SO 中的几个示例,但没有得到我想要的结果。

这是我在另一篇文章中结束的地方,但现在它根本没有显示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-image: url(bg-4a-24516.png);
background-repeat: repeat-x;
background-size: cover;
}
</style>

</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

</html>

有什么建议吗?

最佳答案

实际上,您的示例在您编写代码时可以正常工作。

背景图像被拉伸(stretch),根据您的浏览器显色性,可能难以辨别。

请看下面的 fiddle :

http://jsfiddle.net/audetwebdesign/yS4Uz

我已经拍摄了原始图像并在顶部和底部添加了彩色边框。

您可以在以下位置查看图片:http://postimage.org/image/fsv80qegn/

当您使用 CSS3 属性 background-size: cover 时,背景图像会拉伸(stretch),这会导致渲染时出现一些失真,尤其是对于渐变。

body {
background-image: url(http://s15.postimage.org/kriqf9i9n/sx_U5g.png);
background-size: cover;
background-repeat: repeat-x;
}

如果将 cover 更改为 contain,您将获得另一种可能更适合其他应用程序的效果。

关于html - 页面背景图片到封面无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15344243/

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