本节介绍 css 的背景属性以及利用成果
- css 罕用的背景属性
- 背景利用
-
css3 新增背景属性
css 罕用背景属性
css 中的背景是由 background 属性来设置背景的,它是一个综合属性,能够拆分为繁多的属性
背景色彩 background-color
属性名:background-color
作用:在盒模型 border 以内区域扭转或者增加背景色彩
代码示范:
div{background-color: red;}
背景图片 background-image
属性名:background-image
属性值:url(门路)
作用:给盒子增加图片背景,图片不够覆盖住盒子会反复铺满盒子背景
代码示范:
div{background-image: url();/* 图片门路 */
}
背景反复 background-repeat
属性名:background-repeat
作用:设置增加背景图是否反复进行加载
属性值:repeat(默认值)、no-repeat、repeat–x、repeat–y
属性值 | 作用 |
---|---|
repeat | 默认值,反复加载图片填满盒子背景区域 |
no-repeat | 不反复加载图片 |
repeat–x | 反复加载程度方向 |
repeat–y | 反复加载垂直方向 |
代码示范:
div{background-repeat:no-repeat}
背景定位 background-position
属性名:background-position
作用:设置不反复图片的加载地位
属性值:left、right、center、top、center、bottom、px、%,必须要有两个值,一个 x 轴,一个 y 轴
代码片段
背景附着 background-attachment
属性名:background-position
作用:设置背景图片是否随着页面滚动
属性值:scroll、fixed(固定)
综合写法 background
属性值:能够有 1 - 5 个属性值,值之间用空格隔开,背景定位的两个属性值不能被离开写,算作其中的一个属性值,五个属性值地位能够随便书写
代码片段
背景利用
以图换字
个别 h1 标签是权重最高的,外部会搁置最重要内容,比方 logo 图片、最大的题目等
h1 外部文字也能够进步 seo 搜寻排名又想应用文字且应用图片就须要用到以图换字
div{
text-indent:-30em;
white-space:nowrap;
overflow:hidden;
}
精灵图利用
精灵图利用:当用户拜访网站时,网页上每一张图都要通过一次申请能力展示给用户,然而网页中有许多小背景图作润饰,会 影响网页的加载速度 ,这时候就要将小 背景图集合成一张图片 进行加载
实际操作:
1、要设置好背景图的宽度
2、精灵图放的都是装璜的小背景图
3、精灵图能够 x 轴、y 轴摆放
代码片段
css3 新增背景属性
背景半透明
rgba 模式:在 rgb 根底减少一个透明度,取值范畴 0 -1,值越小,透明度越高
书写形式:rgba(红色,绿色,蓝色,不透明度)
留神:透明度只对背景有用,内容不影响
代码示范:
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid red;
width: 400px;
height: 400px;
margin: 100px auto;
background-color:rgba(232, 211, 255,0.2);
}
背景缩放 background-size
作用:缩放背景图的比例大小
属性值:px 值、%、cover(主动调整缩放比例,溢出会被暗藏)、contain(主动调整缩放比例,把图片扩大到展现区域最大化)