神奇的background样式
2273字,阅读需时8分钟
来自专栏
课程/专栏

说background样式神奇,在于它能把多个背景样式组合起来使用,简单易用。使用background样式可以一次性指定元素背景图片、图片的宽度和高度、图片的平铺模式、起始位置和元素的背景颜色,免去书写多个样式标签的麻烦。

例1:使用background样式设置元素的背景图片和颜色

<html>
<head>
<title>background-image样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    .happiy{
         background:#e8e8e8 url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
     }
</style>
</head>
<body>
<div></div>
</body>
</html>

在上面的网页代码中,background样式设置了元素的背景颜色和背景图片,每个样式值用英文空格隔开,没有顺序要求。下图是浏览器显示效果,从显示效果可以看出,应用于happiy样式的DIV元素背景同时被纯色和图片填充。

image.png                                             

 

例2:使用background样式设置元素的背景颜色、背景图片、背景图片的位置和填充模式

<html>
<head>
<title>background-image样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    .happiy{
         background:#e8e8e8 url(http://www.milihua.com/happiy.png) center no-repeat;
        width: 500px;
        height:450px;
     }
</style>
</head>
<body>
<div></div>
</body>
</html>

在上面的网页代码中,background样式设置了元素的背景颜色背景图片,背景图片起始位置和填充模式,每个样式值用英文空格隔开,没有顺序要求。下图是浏览器显示效果,从显示效果可以看出,应用于happiy样式的DIV元素背景被纯色填充,背景图片的平铺模式被设置为no-repeat,位置被设置为center,背景图片在中间显示,没有对元素进行平铺。

image.png

例3:使用background样式设置元素的背景颜色、背景图片、平铺模式为横向模式、填充元素的底部

<html>
<head>
<title>background-image样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    .happiy{
         background:url(http://www.milihua.com/happiy.png) repeat-x  bottom #e8e8e8;
        width: 500px;
        height:450px;
     }
</style>
</head>
<body>
<div></div>
</body>
</html>

在上面的网页代码中,依次设置了背景图片、平铺模式、背景图片起始位置、背景颜色样式。在例1和例2中,背景颜色都是在放在样式的前面,在本例中背景颜色放在了样式的后面,从下图的浏览效果可以看出,background样式标签对样式排列顺序没有要求。

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有