使用图片填充元素背景
6571字,阅读需时22分钟
来自专栏
课程/专栏

在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观。使用图片填充元素背景的常用样式标签有background-image、background-repeat、background-position和background-size,下面分别予以介绍。

background-image

background-image用于设置元素的背景填充图片,background-image的属性值是url函数,url函数要求传入图片的存储路径,存储路径可以是绝对路径,也可以是相对路径。下面的HTML文档展示了background-image的使用方法。

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

在上面的网页代码中,定义了样式happiy,happiy样式使用happiy.png作为元素的背景图片,样式的宽度和高度是500像素和450像素,使用该样式的HTML元素宽度和高度值也将被设置为500像素和450像素,并使用happiy.png作为背景图片。下图是浏览器显示效果。从显示效果可以看出,由于happiy.png图片自身尺寸小于元素的尺寸,happiy.png图片通过重复填充,平铺整个元素背景。

 image.png                                            

background-repeat

在默认情况下图片会从横向和纵向两个方向上对元素背景进行平铺。可以通过样式标签background-repeat修改默认的图片平铺模式,修改上面网页代码的happiy样式,添加background-repeat样式标签,使用横向平铺模式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:repeat-x;
     }

下图是浏览器显示效果。从浏览器显示效果可以看出,将background-repeat样式属性值设置为repeat-x(横向平铺)时,图片仅从横向方向平铺元素背景。

image.png

修改上面网页代码的happiy样式,将background-repeat样式属性值修改为repeat-y,使用纵向平铺模式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:repeat-y;
     }

下图是浏览器显示效果。从浏览器显示效果可以看出,将background-repeat样式属性值设置为repeat-y(横向平铺),图片仅从纵向方向平铺元素背景。

 image.png

修改上面网页代码的happiy样式,将background-repeat样式属性值修改为no-repeat,不使用平铺模式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:no-repeat;
     }

下图是浏览器显示效果。从浏览器显示效果可以看出,将background-repeat样式属性值设置为no-repeat(不使用平铺模式),图片在横向和纵向两个方向上都不进行平铺。

image.png

background-position

background-position用于设置元素背景图片的起始位置,background-position的属性值可以使用关键字、百分比和数值。

关键字值有left、top、center、bottom,关键字值可以两两组合,第一个值是水平位置,第二个值是纵向位置。如果仅设定水平关键字,纵向位置会默认为center。修改上面网页代码的happiy样式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:no-repeat;
        background-position:top;
     }

在上面的happiy样式中,background-position属性值设置了一个关键字(水平方向为top),纵向关键字默认为center。浏览器显示效果如下图所示。从浏览器显示效果可以看出,background-position属性值设置为top时,图片从元素的顶部和中间开始填充元素背景。

 image.png

修改上面网页代码的happiy样式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:no-repeat;
        background-position: right center;
     }

浏览器显示效果如下图所示。从浏览器显示效果可以看出,background-position属性值设置为right center时,图片从元素的右侧和中间开始填充元素背景。

 image.png

background-position的属性值设置为百分比时,需要设置两个值(x% y%),第一个x%是水平位置,第二个y%是纵向位置。从元素的左上角开始,左上角是0% 0%。右下角是100% 100%,如果仅指定了一个值,第二个值将是50%。百分比的最终取值是按照元素的宽度和高度来计算的。

修改上面网页代码的happiy样式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:no-repeat;
        background-position:50% 50%;
     }

浏览器显示效果如下图所示。从浏览器显示效果可以看出,background-position属性值设置为50% 50%时,图片从元素的中间开始填充元素背景。

 image.png

background-position的属性值设置为数值时,需要设置两个数值(xpos ypos),单位可以是像素,也可以是CSS其它单位。第一个值是水平位置,第二个值是纵向位置。从元素的左上角开始,左上角是0 0。如果仅指定了一个值,第二个值将是元素高度的50%。

修改上面网页代码的happiy样式。

.happiy{
        background-image:url(http://www.milihua.com/happiy.png);
        width: 500px;
        height:450px;
        border:1px solid #000000;
        background-repeat:no-repeat;
        background-position:50px 100px;
     }

浏览器显示效果如下图所示。从浏览器显示效果可以看出,background-position属性值设置为50px 100px时,图片从元素左上角起始水平50像素、纵向100像素处,开始填充元素背景。

image.png

background-size

background-size用于设置填充图片的大小,属性值为关键字、百分比和数值。

关键字有contain和cover,当background-size取值为contain时,如果图片尺寸大于元素尺寸,则缩小图片尺寸以适应元素的尺寸,图片按比例缩放;当background-size取值为cover时,则放大图片来适应元素的尺寸,图片按比例放大。修改上面网页代码的happiy样式。

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

浏览器显示效果如下图所示。从浏览器显示效果可以看出,background-size属性值设置为cover时,图片按比例放大以适应元素的尺寸。

 image.png

background-size的值还可以使用百分比和数值来设置元素背景图片的宽度和高度。百分比是按照元素的宽度和高度来计算的,数值直接指定了元素背景图片的宽度和高度,单位是像素或其它CSS单位。百分比和数值都是有两个值组成,第一个值是图片宽度,第二个值是图片高度,如果仅指定宽度,高度默认为自动取值。修改上面网页代码的happiy样式。

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

在上面的网页代码中,background-size的属性值设置为30px,则元素背景图片宽度为30px,图片高度自动适应,图片高度自动适应的好处是图片会按比例缩放,不会让图片变形。浏览器显示效果如下图所示。

image.png

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

手机、电脑同步学

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

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