第4章 CSS3背景

最新推荐文章于 2022-10-01 11:19:45 发布

itzyjr

最新推荐文章于 2022-10-01 11:19:45 发布

阅读量299

点赞数

分类专栏：《图解CSS3:核心技术与案例实战》读书笔记

本文链接：https://blog.csdn.net/itzyjr/article/details/106413913

版权

《图解CSS3:核心技术与案例实战》读书笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

㊀CSS3背景属性简介

背景主要包括5个属性：

❏background-color 背景颜色

❏background-image 背景图片

❏background-repeat 背景图片展示方式

❏background-attachment 背景图片是固定还是滚动

❏background-position 背景图片位置

可以单独写，也可以将这些属性串在一起使用：

background:[<background-color>][,<background-image>][,<background-repeat>][,<background-attachment>][,<background-position>]

1.background-color属性

background-color:transparent || <color>

默认是“transparent”，<color>颜色格式如下：

颜色名：如“red”
rgb色：如rgb(255,0,0)或rgb(100%,0%,0%)
hls值：如hsl(0,100%,50%)
十六进制值：如#ff0000
rgba色：如rgba(255,0,0,0.3)
hlsa值：如hsla(0,100%,50%,0.5)

2.background-image属性

background-image:none || <url>

默认值为“none”，<url>可以是相对或绝对地址。

3.background-repeat属性

background-repeat:repeat || repeat-x || repeat-y || no-repeat

用来设置元素背景图片在元素的盒子模型中的铺放格式。

默认值为repeat：背景图片沿元素的X轴和Y轴同时平铺。
repeat-x：元素背景图片沿X轴平铺，Y轴不进行任何铺放。
repeat-y：元素背景图片沿Y轴平铺，X轴不进行任何铺放。
no-repeat：背景图片不做任何铺放。

4.background-attachment属性

background-attachment:scroll || fixed

用来设置元素背景图片是否或者随着页面的其余部分滚动。

默认值scroll：背景图片会随着浏览器滚动条一起滚动。
fixed：背景图片固定不动。一般用在html或body标签上，在其他标签上不能达到固定效果！

5.background-position属性

background-position:<percentage>||<length>||[left|center|right] [,top|center|bottom]

用来设置元素背景图片的位置，其默认值为 (0,0) || (0%,0%) || (left top)。

下图是不同表述同一布局的几种方式：

与背景相关的新增属性：

❏background-origin：指定绘制背景图片的起点。

❏background-clip：指定背景图片的显示范围。

❏background-size：指定背景图片的尺寸大小。

❏background-break：指定内联元素的背景图片进行平铺的循环方式。

㊁背景原点属性

background-origin:padding-box || border-box || content-box

padding-box(padding)：默认值，决定background-position起始位置从padding的【外边缘】(border的内边缘)开始显示背景图片。
border-box(border)：决定background-position起始位置从border的【外边缘】开始显示背景图片。
content-box(content)：决定background-position起始位置从content的【外边缘】(padding的内边缘)开始显示背景图片。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>background-origin使用方法</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 200px;
            border: 20px dashed rgba(0,0,0,0.3);
            background: orange url(bg.png) no-repeat left top;
            padding: 20px;
            margin: 30px;
        }
        .padding-box {
            -webkit-background-origin: padding-box;
            -moz-background-origin: padding-box;
            -o-background-origin: padding-box;
            -ms-background-origin: padding-box;
            background-origin: padding-box;
        }
        .border-box {
            -webkit-background-origin: border-box;
            -moz-background-origin: border-box;
            -o-background-origin: border-box;
            -ms-background-origin: border-box;
            background-origin: border-box;
        }
        .content-box {
            -webkit-background-origin: content-box;
            -moz-background-origin: content-box;
            -o-background-origin: content-box;
            -ms-background-origin: content-box;
            background-origin: content-box;
        }
    </style>
</head>
<body>
<div class="padding-box"></div>
<div class="border-box"></div>
<div class="content-box"></div>
</body>
</html>

padding-box:从padding外边缘开始；border-box:从border外边缘开始；content-box:从content外边缘开始。

虽然现代浏览器都支持background-origin属性，但在不同浏览器下还是需要浏览器各自的前缀，如下表：

㊂背景裁切属性

background-clip:border-box || padding-box || content-box
————————————————————————————————————————————————————————
border-box：默认值，元素背景图像从元素的border区域向外裁剪，即元素边框之外的背景图片都将被裁剪掉。
padding-box：元素背景图像从padding区域向外裁剪，即元素padding区域之外的背景图像都将被裁剪掉。
content-box：元素背景图像从content区域向外裁剪，即元素内容区域之外的背景图像将被裁剪掉。

•当元素的background-repeat为no-repeat时，background-color是从元素的边框左上角到边框右下角止，而background-image却不一样，从内部补白(padding)边缘的左上角到元素边框(border)的右下角边缘止。

•当元素background-repeat的值为repeat时，background-color此时完全在background-image之下，而且background-image从元素边框左上角起到元素边框右下角止，但background-position的起始点却是从元素的内部补白(padding)外边缘开始！！！

z-index层次关系，从上到下：border、background-image、background-color

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>background的默认显示</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            border: 50px dashed rgba(0,0,0,0.8);
            background: rgba(0,25,25,0.8) url(border.jpg) no-repeat;
            padding: 30px;
            margin: 20px;
        }
        .no-repeat {
            background-repeat: no-repeat;
        }
        .repeat {
            background-repeat: repeat;
        }
    </style>
</head>
<body>
<div class="no-repeat"></div>
<div class="repeat"></div>
</body>
</html>

background默认显示，即background-clip:border-box

去掉background:url属性值后：

从运行效果图也可印证上文逻辑：

上面一张，no-repeat：背景设置是从border内边缘左上角到border右下角。背景图片不做任何铺放。border之外背景图被裁剪。

下面一张，repeat：背景设置是从border外边缘左上角到border右下角。background-image覆盖在background-color之上。background-position是从border内边缘左上角开始的，然后背景图片沿元素的X轴和Y轴同时平铺。border之外背景图被裁剪。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>background-clip使用方法</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            border: 30px dashed rgba(25,25,125,0.5);
            background: orange url(border.jpg) no-repeat;
            margin: 20px;
            padding: 30px;
        }
        .border-box {
            -webkit-background-clip: border-box;
            -moz-background-clip: border-box;
            -o-background-clip: border-box;
            -ms-background-clip: border-box;
            background-clip: border-box;
        }
        .padding-box {
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            -o-background-clip: padding-box;
            -ms-background-clip: padding-box;
            background-clip: padding-box;
        }
        .content-box {
            -webkit-background-clip: content-box;
            -moz-background-clip: content-box;
            -o-background-clip: content-box;
            -ms-background-clip: content-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
</body>
</html>

border-box：no-repeat：图片从border内边缘左上角开始到border右下角，并且在background-color(orange)之上在border之下。超出border的全部裁剪掉。

padding-box：直接将padding外的全部裁剪掉。

content-box：直接将content外的全部裁剪掉。

background-clip的text属性：

它配合Webkit内核的私有属性text-fill-color:transparent可以制作背景图片填充文本的效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>背景图片填充文本效果</title>
    <style type="text/css">
        div {
            width: 350px;
            background: orange url(border.jpg);
            padding: 20px;
            color:#fff;
            font-size: 60px;
            font-weight: bold;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
<div>背景图片填充文本效果<br />BACKGROUND</div>
</body>
</html>

border.jpg:

事实上background:orange与color:#fff去掉效果也是一样。首先填充的url(border.jpg)覆盖了background-color，同样url(border.jpg)也覆盖了文本color。

如果去掉url(border.jpg)，则字体颜色为orange。

background-clip各浏览器私有属性前缀如下表：

background-origin与background-clip的属性取值范围相同，但它们区别如下：

❏background-origin：用来控制元素背景图片定位点(background-position)的起始位置。

❏background-clip：用来控制元素背景图片(background-image)的展示区域。

㊃背景尺寸属性

background-size:auto || <length> || <percentage> || cover || contain
————————————————————————————————————————————————————————————————————
auto：默认值。将保持背景图片原始高度和宽度。
<length>：取具体的整数值，将改变背景图片的大小。
<percentage>：取值为百分值，同样改变背景图片的大小。但此值是相对于【元素的宽度】来进行计算，并不是根据背景图片的宽度来进行计算。
cover：将背景图片放大，以适合铺满整个容器。这种方法会致使背景图片失真。
contain：保持背景图片本身的宽高比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。

当background-size只取一个值时，指定了背景图片的宽度，第二个值相当于auto，也就是让背景图片高度自动地按比例缩放。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>background-size的运用</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(bg.jpg) no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

bg.jpg尺寸为100×50px

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>background-size的运用</title>
    <style type="text/css">
        div {
            width: 320px;
            height: 270px;
            border: 1px solid red;
            background: url(bg.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

㊄内联元素背景图像平铺循环方式

任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式(行布局:其表现形式始终以行进行显示)。

可惜2014.7为止background-break属性仅属于Firefox浏览器，而且其属性要写成“-moz-background-inline-policy”。

background-break三个属性值分别如下：

❏bounding-box：背景图像在整个内联元素中进行平铺。

❏each-box：背景图像在行内中进行平铺。

❏continuous：下一行的背景图像紧接着上一行中的图像继续平铺。

background-break属性受限于浏览器的支持力度，目前使用度极低，仅在Firefox下能实现，而且还需要修改属性写法，在此仅供大家参考。

㊅多背景属性

background:[background-image]|[background-position][/background-size]|
           [background-repeat]|[background-attachment]|
           [background-clip]|[background-origin],*
————————————————————————————
可以把上面的缩写拆解成以下形式：
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
background-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;

background-image需要设置多个，面其他属性可以选择一个或多个，如果一个元素有多个背景图片，其他属性只有一个属性值时，表示所有背景图像应用了相同的属性值。background-color只能设置一个，否则语法错误。

实战体验：制作花边框

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3多背景制作花边框</title>
    <style type="text/css">
        .demo {
            width: 240px;
            border: 20px solid rgba(104, 104, 142,0.5);
            border-radius: 10px;
            padding: 80px 60px;
            color: #f36;
            font-size: 25px;
            line-height: 1.5;
            text-align:center;
        }
        .multipleBg {
            background: 
                    url("bg-tl.png") no-repeat left top,
                    url("bg-tr.png") no-repeat right top,
                    url("bg-bl.png") no-repeat left bottom,
                    url("bg-br.png") no-repeat right bottom,
                    url("bg-repeat.png") repeat left top;
            /*改变背景图片的position起始点，四朵花都是border边缘处起，而平铺背景是在paddin内边缘起*/
            -webkit-background-origin: border-box, border-box,border-box,border-box,padding-box;
            -moz-background-origin: border-box, border-box,border-box,border-box,padding-box;
            -o-background-origin: border-box, border-box,border-box,border-box,padding-box;
            background-origin: border-box, border-box,border-box,border-box,padding-box;
            /*控制背景图片的显示区域，所有背景图片超边border外边缘都将被剪切掉*/
            -moz-background-clip: border-box;
            -webkit-background-clip: border-box;
            -o-background-clip: border-box;
            background-clip: border-box;
        }
    </style>
</head>
<body>
<div class="demo multipleBg">我使用了五张背景图片。制作这样的效果</div>
</body>
</html>