【CSS】【14】CSS中使用背景图像

默认情况下背景图像会自动向水平和竖直两个方向平铺，如果不希望不平铺，或者只希望沿一个方向平铺，可以使backgroud-repeat属性来控制，该属性可以取以下4种之一

repeat：沿水平和竖直两个方向平铺，也是默认值；

no-repeat：不平铺，只显示一次；

repeat-x：只沿水平方向平铺；

repeat-y：只沿竖直方向平铺；

回到《【CSS】【6】CSS学习的一些前提》的登录界面，里面只有一个背景图像：【CSS】【14】CSS中使用背景图像

而我们的页面中却是整张都是这种图像，怎么做到的呢？

一、HTML部分

这个HTML页面的body部分是一个空内容，即无内容，此时的页面效果如下：

二、定义CSS部分内容

body
{
background-image:url(login_bg.gif);
}

引用背景图片，缺省值为repeat，沿水平和竖直方向平铺，效果如下：

三、只水平平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:repeat-x;
}

效果如下：

四、只竖直平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:repeat-y;
}

效果如下：

五、不平铺

body
{
background-image:url(login_bg.gif);

bacground-repeat:no-repeat;
}

效果如下：

六、HTML部分

在实际应用过程中我们经常会遇到如下问题，背景图像如下：

这是一个渐变过程的图版本，若使用CSS直接引入，则会出现如下效果：

body
{
background-image:url(login_bg.png);

}

可间明显有一个重复的过程，这样的页面背景站在美观的角度上肯定是不被接受的，该如何办呢？一般的解决办法就是只使它在水平方向平铺，然后背景色使用与该图像下边颜色一样的值进行延伸，如下图片白色就一直向下延伸下去了，根本感知不到图片的大小：

图片的高度是到这里的哟~

本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261763，如需转载请自行联系原作者