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

默认情况下背景图像会自动向水平和竖直两个方向平铺,如果不希望不平铺,或者只希望沿一个方向平铺,可以使backgroud-repeat属性来控制,该属性可以取以下4种之一
repeat:沿水平和竖直两个方向平铺,也是默认值;
no-repeat:不平铺,只显示一次;
repeat-x:只沿水平方向平铺;
repeat-y:只沿竖直方向平铺;
回到《 【CSS】【6】CSS学习的一些前提 》的登录界面,里面只有一个背景图像:图片   而我们的页面中却是整张都是这种图像,怎么做到的呢?
一、HTML部分
<body>    
</body>
这个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);

}

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

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



你可能感兴趣的:(css)