文章目录
1. 背景
back-ground-color
background-color
设置背景颜色
background-image
background-image
设置背景图片(背景图片将会盖在背景颜色上方)- 如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满(图片重复的超出元素的部分将会被裁剪掉)
- 如果背景图片大小大于元素,则背景图片一部分会无法完全显示(图片多余的超出元素部分将会被裁剪掉)
- 如果背景图片大小等于元素,则背景图片会直接正常显示
- 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
background-origin
background-origin
背景图片的偏移量计算的原点border-box
背景图片的变量从边框处开始计算padding-box
默认值,background-position
从内边距处开始计算content-box
背景图片的偏移量从内容区处计算
注意:经过测试,它是第一张图片的左上角到元素左上角的距离(第一张的意思是:在图片repeat铺满之前)。如果是border-box,那就是第一张图片的左上角到元素边框靠外面的哪那个左上角的距离。如果是padding-box,那就是到padding靠外面那个左上角的距离。如果是content-box,那就是到content左上角的距离。
background-size
-
background-size
用来调整背景图像的尺寸大小。- 第一个值表示宽度,第二个值表示高度;如果只写一个,则第二个值默认是
auto
(即表示第二个值等比例缩放) cover
图片的比例不变,将元素铺满contain
图片比例不变,将图片在元素中完整显示
- 第一个值表示宽度,第二个值表示高度;如果只写一个,则第二个值默认是
-
补充:
background-size 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin(图片的起始位置) 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。
如:background-size : contain | cover | 100px 100px | 50% 100%;
background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比); background-size :cover; // 扩展图片来填满元素(保持像素的长宽比); background-size :100px 100px; // 调整图片到指定大小; background-size :50% 100%; // 调整图片到指定大小,百分比相对于"包含元素"的尺寸。
思考顺序
先确定图片的偏移起点,即相对于哪里作为偏移起点,默认就是以内边距的左上角作为偏移起点。后面默认会把图片的左上角与偏移起点对齐,并且大小的百分比也要参考起点的位置。
一张图片放入一个元素,然后再确定这个图片的大小,默认就是图片真实的大小。大小如果写成百分比,这个百分比是相对于元素宽高分别而言的百分比,如果只写宽,那么高就是自动,如果写宽和高,那就是分别相对于元素的宽和高而言的,这个图片的大小一旦确定,那么后面不会再影响到图片的大小了。
确定偏移起点后,然后确定图片的位置,即图片的左上角相对于偏移起点在横轴和纵轴方向的偏移量。默认是不偏移,即图片左上角和与偏移起点重合,横轴和纵轴偏移量都是0。如果写成百分比,就是元素的宽度和高度分别减去已确定好大小的图片的宽度和高度大小,再乘以这个百分比,正负号有意义,就是移动的距离。如果只写一个值,那么这个值就水平或纵轴偏移量,另外一个方向上的偏移量就默认成了50%。
然后开始repeat这个图片,然后clip这个图片。
background-position
-
background-position
设置背景图片的位置- 通过top-center-bottom,left-center-right这 几个表示方位的词来设置背景图片的位置:使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是
center
- 通过偏移量来指定背景图片的位置:水平方向偏移量、垂直方向变量
- 通过top-center-bottom,left-center-right这 几个表示方位的词来设置背景图片的位置:使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是
-
background-position百分比原理
-
等价写法
top left, left top 等价于 0% 0%. top, top center, center top 等价于 50% 0%. right top, top right 等价于 100% 0%. left, left center, center left 等价于 0% 50%. center, center center 等价于 50% 50%. right, right center, center right 等价于 100% 50%. bottom left, left bottom 等价于 0% 100%. bottom, bottom center, center bottom 等价于 50% 100%. bottom right, right bottom 等价于 100% 100%.
-
background-position百分比计算公式(参考:https://www.cnblogs.com/starof/p/4610984.html)
background-postion:x y; x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。 y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
示例:
background-position:center center等价于background-position:50% 50% 等价于background-position:?px ?px
例子中用到背景图如下【尺寸:200px*200px】:
-
让背景图在容器中居中。
<style type="text/css">
.wrap{
width: 300px;
height: 300px;
border:1px solid green;
background-image: url(img/image.png);
background-repeat: no-repeat;
/* background-position: 50% 50%; */
background-position: center center;
}
</style>
<div class="wrap"></div>
效果都是让背景图片居中
如上通过设置百分比和关键字能实现背景图居中,如果要实现通过具体值来设置图片居中该设置多少?
根据上面公式:
x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;
y=(容器的高度-背景图高度)*y百分比=(300px-200px)*50%=50px;
即设置background-postion:50px 50px;
测试一下:
<style type="text/css">
.wrap{
width: 300px;
height: 300px;
border:1px solid green;
background-image: url(img/image.png);
background-repeat: no-repeat;
/* background-position: 50% 50%; */
/* background-position: center center;*/
background-position: 50px 50px;
}
</style>
<div class="wrap"></div>
效果同样居中。
background-repeat
background-repeat
设置背景图片的重复方式repeat
默认值,背景图片沿着 x 轴和 y 轴双方向重复repeat-x
背景图片沿着 x 轴方向重复repeat-y
背景图片沿着 y 轴方向重复no-repeat
背景图片不重复
background-clip
background-clip
设置背景的范围(同时控制背景颜色和背景图片的裁剪)border-box
默认值,背景会出现在边框的下边padding-box
背景不会出现在边框,只出现在内容区和内边距content-box
背景只会出现在内容区
background-attachment
background-attachment
背景图片是否跟随元素移动scroll
默认值,背景图片会跟随元素移动fixed
背景会固定在页面中,不会随元素移动
示例 1
.box1 {
height: 500px;
width: 500px;
overflow: auto;
border: 20px red double;
padding: 10px;
/* 背景色 */
background-color: darksalmon;
/* 背景图 */
background-image: url("/assets/背景.png");
/* 背景图重复方式 */
background-repeat: no-repeat;
/* 背景图偏移位置 */
background-position: 0 0;
/* 背景图偏移量计算的原点 */
background-origin: content-box;
/* 背景范围 */
background-clip: content-box;
/* 背景图片大小 */
background-size: contain;
}
.box2 {
width: 100px;
height: 1000px;
background-color: orange;
background-image: url("assets/背景2.jpg");
background-repeat: no-repeat;
background-position: 50px 50px;
/* 背景图片是否跟随移动 */
background-attachment: fixed;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0yTx9v3-1652598084657)
(assets/9f806f08854b47c21d02d5c23ed805a7.gif)]
background简写属性
backgound
背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求,也没有哪个属性是必须写的
注意
- 如果要写background-size,那么
background-size
必须写在background-position
的后边,并且使用/隔开background-position/background-size
background-origin background-clip
两个样式,orgin
要在clip
的前边
示例 2
.box1 {
height: 500px;
width: 500px;
border: 10px red double;
padding: 10px;
background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px
padding-box content-box;
}
练习 1:按钮点击效果
代码
<style>
a:link {
/* 因为本身是行内元素,变成块元素更方便设置宽高 */
display: block;
width: 93px;
height: 29px;
background: url("assets/背景/练习2-背景/link.png");
}
a:hover {
background: url("assets/背景/练习2-背景/hover.png");
}
a:active {
background: url("assets/背景/练习2-背景/active.png");
}
</style>
<a href="javascript:;"></a>
效果
练习 2:让背景固定不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
body,html {
min-width: 1200px; /* 随着浏览器宽度变小, body的宽度至少是1200px */
background-image: url(./img/bg.jpg);
background-size: cover; /* 全部覆盖body */
background-repeat: no-repeat;
background-attachment: fixed;
}
.box1 {
width: 1200px;
height: 400px;
background-color: #bfa;
}
[class^=box] {
opacity: .5;
margin: 0 auto;
}
.box2 {
width: 1200px;
height: 400px;
background-color: rgb(42, 77, 34);
}
.box3 {
width: 1200px;
height: 400px;
background-color: rgb(17, 45, 10);
}
.box1 {
width: 1200px;
height: 400px;
background-color: rgb(7, 133, 49);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box"></div>
</body>
</html>