css之background属性总结
2020-02-25 本文已影响0人
Weastsea
background 一个集成属性，按照书写的顺序：包含以下子属性：
- background-image： 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
- background-position: 指定背景图像在元素中出现的位置。
- background-size: 指定背景图像尺寸。
- background-repeat: 指定背景图像如何填充。
- background-attachment: 定义滚动时背景图像相对于谁固定。
- background-origin: 指定背景图像从元素的哪个区域作为显示的原点。
- background-clip: 指定背景图像向外裁剪的区域。
- background-color: 指定背景颜色。
background-image
属性值： 使用绝对或相对地址指或者创建渐变色来确定图像
说明： 在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html, body {
height: 100%;
}
/* 在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上 */
.image {
width:500px;
height: 500px;
background-image: url(./img/dog.jpg);
background-repeat: no-repeat;
background-color: red;
}
/* 使用绝对或相对地址指或者创建渐变色来确定图像 */
.gradient {
height: 100px;
background-image: linear-gradient(to top, #45B5DA, #0382AD);
}
/* 组合使用例子 */
.multi {
height: 500px;
background-image: url(./img/dog.jpg),
url(./img/dog2.jpg),
url(./img/dog3.jpg),
linear-gradient(to top, #45B5DA, #0382AD);
background-repeat: no-repeat;
background-position: 0 0,
500px 0,
1000px 0; }
</style>
<body>
<div class="image"></div>
<hr>
<div class="gradient"></div>
<hr>
<div class="multi"></div>
</body>
</html>
效果图：
background-image
background-position
属性值包含：
- percentage : 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
- length : 用长度值指定背景图像在元素中出现的位置。可以为负值。
- center: 背景图像水平垂直局中。
- left: 背景图像从元素左边开始出现。
- right: 背景图像从元素右边开始出现。
- top :背景图像从元素顶部开始出现。
- bottom: 背景图像从元素底部开始出现。
只接受1到4个参数值
例如：
1个param：
center;
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
2个params：
left top;
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
3个params:
left bottom 10px;
4个params：
right 20px bottom 20px
注意：
如果提供三或四个，每个 <percentage> 或 <length> 偏移量之前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
background: url(test1.jpg) no-repeat right 20px bottom 20px;
background: url(test1.jpg) no-repeat left bottom 10px;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。 */
.position1 {
border: 1px solid #000;
width: 1000px;
height: 350px;
background-image: url(../img/dog.jpg);
background-repeat: no-repeat;
/* background-position: center; */
background-position: 10%;
}
.position2 {
border: 1px solid #000;
width: 1000px;
height: 350px;
background-image: url(../img/dog.jpg);
background-repeat: no-repeat;
background-position: 40px 50px;
}
.position3 {
border: 1px solid #000;
width: 1000px;
height: 350px;
background-image: url(../img/dog.jpg);
background-repeat: no-repeat;
background-position: left bottom 20px;
}
.position4 {
border: 1px solid #000;
width: 1000px;
height: 350px;
background-image: url(../img/dog.jpg);
background-repeat: no-repeat;
background-position: top 20px left 100px;
}
</style>
</head>
<body>
<div class="position1"></div>
<hr>
<div class="position2"></div>
<hr>
<div class="position3"></div>
<hr>
<div class="position4"></div>
</body>
</html>
效果图：
background-position.png
background-size
属性值：
- length: 用长度值指定背景图像大小。不允许负值。
- percentage: 用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。我的理解就是width或height有任何一个属性如果没有覆盖到容器范围，就会放大，另一个也跟谁着等比例放大。可能会超过图片的范围。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。我的理解就是，width或height，有任何一个属性超出了容器的范围，就会等比缩小，直到图片完全包含在容器内。
该属性只能接受1-2个参数：
- 1param:
1: cover 或者 contain（只接受一个）
2: 只提供一个具体的值（length/percentage），该值用于定义背景图像的宽度，高度将依据图像宽度定义进行等比缩放计算得到。 - 2params : 50% 50%, 如果提供两个，第一个用于定义背景图像宽度，第二个定义高度；
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border:1px dashed #666;
width:400px;
height:350px;
background:url(../img/dog3.jpg) no-repeat;}
.cover p {
background-size:cover;
}
.contain p {
background-size:contain;
}
.length p {
background-size:100px 140px;
}
.percentage p {
background-size: 50% 30%;
}
</style>
</head>
<body>
<ul class="test">
<li class="cover">
<h2>cover</h2>
<p>将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。</p>
</li>
<li class="contain">
<h2>contain</h2>
<p>将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。</p>
</li>
<li class="length">
<h2>length</h2>
<p>自定义背景图像大小</p>
</li>
<li class="percentage">
<h2>percentage</h2>
<p>自定义背景图像大小</p>
</li>
</ul>
</body>
</html>
效果如下：
background-position.png
background-repeat
属性值：
- repeat-x：背景图像在横向上平铺
- repeat-y： 背景图像在纵向上平铺
- repeat： 背景图像在横向和纵向平铺
- no-repeat： 背景图像不平铺
- round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
- space: 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
该属性接受1-2个参数：
- 如果提供两个参数值，第一个用于横向，第二个用于纵向；
- 提供一个，则同时应用于横向与纵向，特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.repeat-x {
width: 2500px;
height: 350px;
background-image: url(../img/dog.jpg);
background-repeat: repeat-x;
}
.repeat-y {
width: 400px;
height: 750px;
background-image: url(../img/dog.jpg);
background-repeat: repeat-y;
}
.repeat {
width: 2000px;
height: 400px;
background-image: url(../img/dog.jpg);
background-repeat: repeat;
}
.round {
width: 2000px;
height: 800px;
background-image: url(../img/dog.jpg);
background-repeat: round;
}
.space {
width: 2000px;
height: 700px;
background-image: url(../img/dog.jpg);
background-repeat: space;
background-color: red;
}
</style>
</head>
<body>
<div class="repeat-x">横向平铺背景图片</div>
<hr>
<div class="repeat-y">纵向平铺背景图片</div>
<hr>
<div class="repeat">平铺背景图片</div>
<hr>
<div class="round">背景图像不能以整数次平铺时，会根据情况缩放图像</div>
<hr>
<div class="space">当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围</div>
</body>
</html>
效果图：
background-attachment
属性值：
- fixed 背景图像相对于视口（viewport）固定。
- scroll 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- local 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 350px;
width: 1000px;
background-image: url(../img/dog.jpg);
background-repeat: no-repeat;
background-position: 10% 10%;
background-attachment: local;
overflow: scroll;
}
</style>
</head>
<body>
<div>
<p>背景图像不随窗体内容滚动始终固定</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>背景图像不随窗体内容滚动始终固定</p>
</div>
</body>
</html>
效果图：
image.png
background-origin
属性值：
- border-box：从border区域（含border）开始显示背景图像。
- padding-box：从padding区域（含padding）开始显示背景图像
- content-box：从content区域开始显示背景图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border:10px dashed #666;
width:400px;
height:400px;
padding:20px;
background:url(../img/dog.jpg) no-repeat;
background-size: contain;
background-color: #aaa;
}
.border-box p {
background-origin:border-box;
}
.padding-box p {
background-origin:padding-box;
}
.content-box p {
background-origin:content-box;
}
</style>
</head>
<body>
<ul>
<li class="border-box">
<h2>border-box</h2>
<p>从border区域（含border）开始显示背景图像</p>
</li>
<li class="padding-box">
<h2>padding-box</h2>
<p>从padding区域（含padding）开始显示背景图像</p>
</li>
<li class="content-box">
<h2>content-box</h2>
<p>从content区域开始显示背景图像</p>
</li>
</ul>
</body>
</html>
效果图：
background-clip
默认值： border-box
属性值：
- border-box：从border区域（含border）开始向外裁剪背景。
- padding-box：从padding区域（含padding）开始向外裁剪背景。
- content-box：从content区域开始向外裁剪背景。
- text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width:400px;
height:200px;
margin:0;
padding:20px;
border:20px dashed #666;
background:url(../img/dog.jpg) no-repeat;
background-origin:border-box;
/* 背景颜色也会被剪裁 */
background-color: #aaa ;
}
.border-box p {
background-clip:border-box;
}
.padding-box p {
background-clip:padding-box;
}
.content-box p {
background-clip:content-box;
}
.text p {
width:100%;
height:100%;
background-repeat:repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:bold;
font-size:120px;
}
</style>
</head>
<body>
<ul>
<li class="border-box">
<h2>border-box</h2>
<p>从border区域（不含border）开始向外裁剪背景</p>
</li>
<li class="padding-box">
<h2>padding-box</h2>
<p>从padding区域（不含padding）开始向外裁剪背景</p>
</li>
<li class="content-box">
<h2>content-box</h2>
<p>从content区域开始向外裁剪背景</p>
</li>
<li class="text">
<h2>text</h2>
<p>从前景内容的形状作为裁剪区域向外裁剪背景</p>
</li>
</ul>
</body>
</html>
效果图：
