CSS背景属性
该篇文章主要介绍了 background 背景属性(颜色、图片、重复、位置、复合属性)、CSS 精灵图,背景固定,背景尺寸、线性渐变,径向渐变,浏览器私有前缀等一系列与背景属性相关联的知识点
1、background-color 背景颜色
<style>
.box {
/* background-color: orange; */
background-color: rgba(245, 100, 4, 0.5); /* 背景颜色及透明度 0.5 */
}
</style>
<!--
背景颜色可以用 十六进制、rgb()、rgba() 或 英文单词表示
padding 区域是有背景颜色的
-->
2、background-image 图片
<style>
.box {
background-image: url(../images/luobo.png);
}
</style>
<!--
该属性用来设置背景图片
图片路径要写在 `url()`圆括号中,可以是相对路径,也可以是绝对路径,可以同时写多个路径
地址相对路径是从 css 样式的位置出发
-->
3、background-repeat 重复
<style>
.box1 {
background-repeat: no-repeat; /* 不平铺 */
}
.box2 {
background-repeat: repeat-y; /* y轴平铺 */
}
.box3 {
background-repeat: repeat-x; /* x轴平铺 */
}
.box4 {
background-repeat: repeat; /* x 和 y 轴平铺,默认值 */
}
</style>
<!-- 该属性用来设置背景图片的重复模式,在默认情况下,背景是会在 x 和 y 轴方向进行平铺 -->
4、background-position 背景图片位置
/* 语法: */
background-position: x y; /* x与盒子左边距离 Y与盒子上边距离 */
/*
该属性用来控制背景图片在盒子中显示的开始位置
背景图片位置默认是从 padding 区开始计算
*/
4.1、数值表达法
/* 数值表达法有三种写法:固定值写法、百分比写法、单个值写法 */
/* 背景图与盒子左边20px 上边30px距离 */
background-position: 20px 30px;
/*
左偏移量=(容器width+左右padding-背景图width)*百分比
上偏移量=(容器height+上下padding-背景图height)*百分比
如果盒子宽为100px,高为200px,内边距为0,背景图宽高分别为50px
则左边距离为(100-50)*10%=5px
则上边距离为(200-50)*20%=30px
*/
background-position: 10% 20%;
/* 负值情况
如果盒子宽为100px,高为200px,内边距为0,背景图宽高分别为50px
则左边距离为(100-50)*-10%=-5px
则上边距离为(200-50)*-20%=-30px
*/
background-position: -10% -20%;
/*
当只有一个值时
表时背景图与盒子左边间距为宽的10%,垂直方向居中显示
*/
background-position: 10%;
4.2、关键词表达法
可以用
(top、bottom)
、(center)
、(left、right)
三组中的任意两个组中的一个值组合或任意一个值来确定位置
/* 左上角 */ background-position: top left; /* 左边中间 */ background-position: left center; /* 上中间 */ background-position: top; ....
单一关键字与对应组合关键字表示法:
单一关键字 等价的组合关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left
5、background 复合属性
p {
background: #fff url(./images/yingtao.png) no-repeat center center;
}
/*
常用的背景相关小属性,可以合写到一条 background 属性中(常用)
background 是 background-color、background-image、background-repeat、background-position 的简写
*/
6、CSS 精灵图
将多个 小图标 合并制作到一张图片上,然后使用
background-position
属性单独显示其中一个;
这样的技术叫做 CSS 精灵技术 ,也叫作 CSS 雪碧图 ;
CSS 精灵技术可以减少 HTTP 请求数,加快网页显示速度,但缺点也很明显:不方便测量,后期改动麻烦。
7、background-attachment 背景固定
背景固定用来决定背景图像的位置在 视口 内固定,或者随着包含它的区块滚动。
属性值 描 述 scroll 默认值。背景图片随着页面的滚动而滚动,相对于元素本身固定,而不是随着它的内容滚动 fixed 表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动 local 背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,同时背景图图片随着页面的滚动而滚动
8、background-size 背景尺寸
属性值 说明 实例 x y x y 数值,分别表示背景图片宽高大小 background-size: 100px 200px; x% y% 百分比是相对于盒子的宽高而言, background-size: 50% 20%; x auto auto 是相对于第一个值宽来自动缩放 第一个值可以是数值,也可以是百分形式 background-size: 100px auto; contain 背景图片智能改变尺寸以容纳到盒子里 background-size: contain; cover 背景图片智能改变尺寸以撑满盒子 background-size: cover; 数值表示法:
.box1 { /* 宽100px 高200px */ background-size: 100px 200px; /* 宽为盒子宽的10% 高为盒子高的20% */ background-size: 10% 20%; /* 宽100px 高相对应宽自动缩放 */ background-size: 100px auto; }
contain 和 cover 表示法:
.box1{ /* 盒子里能看到图片全部内容 */ background-size: contain; } .box2{ /* 自动撑满盒子 */ background-size: cover; }
9、线性渐变
/* 盒子的 background-image 属性可以用 linear-gradient() 形式创建线性渐变背景,语法如下: */ background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
属性值 描述 direction
用角度值指定渐变的方向(或角度);
未设置角度,则默认为 180deg(从上到下);
设置了角度,则 0deg 为竖直向上,然后顺时针旋转 指定关键词 to right、to top、to bottom 、to bottom right 等。color-stop1, color-stop2,...
用于指定渐变的起止颜色。 ① 未设置角度,则默认从上向下渐变
.box1 { width: 200px; height: 200px; /* linear-gradient 线性渐变 默认为从上往下渐变 gole 表示开始颜色 red 表示结束颜色 */ background-image: linear-gradient(gold, red); }
② 用关键字来指定渐变的方向
.box1 { width: 200px; height: 200px; /* linear-gradient 线性渐变 to right 表示渐变方向,向右 gole 表示开始颜色 red 表示结束颜色 */ background-image: linear-gradient(to right, gold, red); }
③ 用度数来指定渐变方向
.box2 { width: 200px; height: 200px; /* 45deg 表示倾斜方向,deg表示度数 */ background-image: linear-gradient(45deg, green, red); }
④ 多个颜色值,并且可以用百分数定义它出现的位置
.box3 { width: 200px; height: 200px; /* yellow 代表中间色 20% 表示yellow出现的位置 */ background-image: linear-gradient(to bottom, blue, yellow 20%, red); }
⑤ 浏览器私有前缀 > 不同浏览器有不同的私有前缀,用来对实验性质的 CSS 属性加以标识
浏览器 前缀 Chrome 浏览器 -webkit-
Firefox 火狐 -moz-
IE、Edge -ms-
欧朋 -o-
background-image: -webkit-linear-gradient(to right, gold, red); background-image: -moz-linear-gradient(to right, gold, red); background-image: -ms-linear-gradient(to right, gold, red); background-image: -o-linear-gradient(to right, gold, red); background-image: linear-gradient(to right, gold, red);
10、径向渐变
/* 盒子的 background-image 属性可以用 radial-gradient() 形式创建径向渐变背景,语法如下: */ background-image: radial-gradient( shape size at position, start-color, ..., last-color );
值 描述 shape 确定圆的类型
ellipse (默认):指定椭圆形的径向渐变
circle :指定圆形的径向渐变size 定义渐变的大小
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边position 定义渐变的位置
center(默认):设置中间为径向渐变圆心的纵坐标值
top:设置顶部为径向渐变圆心的纵坐标值
bottom:设置底部为径向渐变圆心的纵坐标值start-color, …, last-color 用于指定渐变的起止颜色 .box { width: 200px; height: 200px; /* radial-gradient 径向渐变 50% 50% 表示圆心坐标 */ background-image: radial-gradient(50% 50%, red, gold); }
上一篇文章 | 下一篇文章 |
---|---|
CSS常用属性之display属性(六) | CSS常用属性之其它属性(八) |