如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）

默认情况下，通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后，图片会自动横向和纵向平铺。这就会产生一些美观上的问题。 XP人提供CSS代码如下，放在页面头部即可，仅供参考： <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-positon: 100%,100%;} < /style>

续: 有几位朋友说我的这篇文章实在没能解决他们的问题，他们希望的是不考虑自己背景图片的大小，不管多大的屏幕，自己的背景图片自动上下拉伸自己，适应屏幕大小，铺满整个屏幕。所以，我今天再把下面的代码和大家分享。要想实现这样的效果，可以考虑使用滤镜。 <style type="text/css"> body{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale'); background-repeat: no-repeat; background-positon: 100%, 100%; } < /style>

posted @ 2014-10-08 20:45  disneyland  阅读(23497)  评论(0)  编辑  收藏  举报