我有这张图片:
我试图拉伸页面的高度,然后水平重复。水平重复工作正常,但它没有垂直覆盖页面。
我尝试过几个例子,但是我没有得到我想要的结果。
这是我从另一篇文章中结束的地方,但现在它根本没有显示:
<!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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
有什么建议吗?
答案 0 :(得分:0)
实际上,您的示例在编码时正常工作。
背景图片正在被拉伸,可能很难辨别,具体取决于您的浏览器颜色呈现。
请看以下小提琴:
http://jsfiddle.net/audetwebdesign/yS4Uz
我拍摄了原始图像,并在顶部和底部添加了彩色边框。
您可以在http://postimage.org/image/fsv80qegn/
看到图片使用CSS3属性background-size: cover
时,背景图像会拉伸,这会导致渲染时出现一些失真,尤其是对于渐变。
body {
background-image: url(http://s15.postimage.org/kriqf9i9n/sx_U5g.png);
background-size: cover;
background-repeat: repeat-x;
}
如果您将cover
更改为contain
,您将获得可能更适合其他应用的其他效果。