有什么办法让背景图像伸展而不是重复?CSS背景重复
Q
CSS背景重复
2
A
回答
8
不使用任何类型的跨浏览器兼容的CSS(存在background-size
财产但是。)
如果这是针对任何特别的浏览器,它是可能的。否则,您将需要使用<img>
并扩展它。
这里是你如何做到这一点在最新的浏览器:
body {
background-image: url(bg.jpg);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
}
否则,使用<img>
:
img#background {
/* height: 100%; Note: to keep ratio, don't use height */
left: 0;
position: fixed; /* or absolute, if you like */
top: 0;
z-index: -1;
width: 100%;
}
1
你可以使用一个图像,并设置它的宽度和高度100%,z-index到-1位置到绝对。这可能会起作用。
0
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
http://www.w3schools.com/css/css_background.asp
这不会streach你的形象,但它会使图像不重复。
1
background-size是CSS3,不支持。 你可以看看这篇文章:How Do you Stretch a Background Image in a Web Page
希望这会有所帮助。
相关问题
- 1. jQuery .css背景不重复
- 2. CSS背景仍在重复
- 3. 避免CSS背景重复
- 4. CSS重复渐变背景
- 5. CSS,背景重复距离
- 6. CSS背景重复问题
- 7. CSS修复了重复背景问题
- 8. css背景重复div高度重置
- 9. 用css多重背景,只重复一个背景
- 10. CSS失败 - 背景位置,背景重复,背景大小,背景附件
- 11. 重复背景
- 12. css背景图片不重复-x
- 13. CSS多个背景 - 一个重复
- 14. 图像性能为背景重复CSS
- 15. 背景CSS问题 - 不重复
- 16. 验证CSS - 背景重复问题
- 17. 安排CSS Sprites和重复背景
- 18. 不一致CSS背景重复计数
- 19. 顶部填充重复的css背景
- 20. CSS重复背景,精灵或1px png
- 21. CSS背景重复-X的问题
- 22. 重复CSS背景图像的时间
- 23. 具有不同重复背景的CSS
- 24. 锚固CSS重复的背景图片
- 25. 简单的HTML和CSS背景重复
- 26. CSS背景渐变重复问题
- 27. CSS背景从300像素重复起
- 28. HTML/CSS背景重复问题
- 29. 做不重复时CSS背景
- 30. 重复线性渐变的CSS背景
阅读问题。 – random 2009-08-14 11:46:31