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

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

215926716.jpg


二、定义CSS部分内容

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

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

215939881.jpg


三、只水平平铺

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

   bacground-repeat:repeat-x;
}

效果如下:

215953959.jpg



四、只竖直平铺

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

   bacground-repeat:repeat-y;
}

效果如下:

220008432.jpg


五、不平铺

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

   bacground-repeat:no-repeat;
}

效果如下:

220020266.jpg

六、HTML部分
在实际应用过程中我们经常会遇到如下问题,背景图像如下:
220032664.jpg
这是一个渐变过程的图版本,若使用CSS直接引入,则会出现如下效果:

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

}

220045553.jpg

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

220057246.jpg

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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值