**一、**背景颜色 background-color
- 属性名:background-color
- 作用:在盒子区域添加背景颜色的修饰
- 加载区域:在 border 及以内加载背景颜色
- 属性值:颜色名、颜色值
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="box"> 背景颜色 </div>
</body>
</html>
二、背景图片 background-image
- 属性名:background-image
- 作用:给盒子添加图片的背景修饰
- 加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载,加载从 border 以内开始
- 属性值:url(图片路径)
- url:uniform resource locator,统一资源定位符,小括号内部书写查找图片的路径
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 */
background-image: url(images/lagouwang.jpg);
}
- 如果图片不重复,从 border 以内开始加载
- 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背 景颜色
三、背景重复 background-repeat
- 属性名:background-repeat
- 作用:设置添加的背景图是否要在盒子中重复进行加载
- 根据属性值不同,有四种重复加载方式
| 属性值 | 作用 |
| repeat | 重复,默认属性值,表示会使用背景图片重复加载填满整个盒子背景区域 |
| no-repeat | 不重复,不论背景图是否大于盒子范围,都只加载一次图片 |
| repeat--x | 水平重复,使用背景图片水平重复加载铺满第一行,垂直方向不重复 |
| repeat--y | 垂直重复,使用背景图片垂直重复加载铺满第一列,水平方向不重复 |
.box {
width: 200px;
height: 200px;
padding: 30px;
border: 5px dashed red;
margin: 20px;
/* background-color: slateblue; 背景颜色 */
background-image: url(images/lagou_small.jpg);
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
四、背景定位 background-position
- 属性名:background-position
- 作用:主要用于设置不重复的图片在背景区域的加载开始位置
- 属性值:分为三种写法,单词表示法、像素表示法、百分比表示法。不论哪种写法
- 属性值都有两个,值之间用空格分隔
- 第一个属性值:表示背景图片在水平方向的位置
- 第二个属性值:表示背景图片在垂直方向的位置
①、单词表示法
- 属性值都是使用代表方向的单词进行书写
- 水平方向可选单词:left、center、right
- 垂直方向可选单词:top、center、bottom
- 单词表示图片与盒子背景区域进行对应方向的对齐
background-position: right bottom; /* 对应方向对齐 */
②、像素表示法
- 使用像素值作为背景定位的属性值
- 第一个属性值:像素是几,表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
- 第二个属性值:像素是几,表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离
background-position: 50px 50px;
像素值区分正负,正负代表位移方向不同:
- 正数:表示图片针对盒子的原点向右、向下移动
- 负数:表示图片针对盒子的原点向左、向上移动
百分比表示法使用百分比数字作为属性值
- 100% 代表的数值:
- 水平方向,等价于盒子的 border 以内的背景区域宽度减去图片的宽度
- 垂直方向,等价于盒子的 border 以内的背景区域高度减去图片的高度
五、背景附着 background-attachment
- 属性名:background-attachment
- 作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动。 属性值
| 属性值 | 说明 |
| scroll | 滚动的,表示背景图片与盒子保持相对位置不变,随着页面的滚动而滚走 |
| fixed | 固定的,背景图的定位的参考点从盒子border 以内的左上顶点变为了浏览器窗口的左 上顶点,页面滚动时,浏览器窗口的左上顶点是不变的,导致背景图固定在浏览器窗口的某个位置,不会随着页面滚动而滚走 |
六、综合写法 background
- background 属性可以将五个单一属性的值进行合写
- 属性值:可以有 1-5 个属性值,值之间用空格进行分隔,背景定位的两个属性值算作 一个属性值,不能被分开也不能颠倒顺序。五个属性值之间可以互换位置
body {
background: url(images/bj.jpg) no-repeat center top scroll #666;
}
注意事项:
**①、**如果属性值没有设置完全,其他没有设置的单一属性会按照默认值加载
background: pink;
②、如果想去层叠综合属性中的一部分,其他的属性保持不变,最好使用单一属性写法进行层叠
body {
background: url(images/bj.jpg) no-repeat center top #666;
background-attachment: scroll;
}
七、背景应用
①、替换插入图
- h1 标签是权重最高的标签,一般会在内部书写最重要的内容,比如 logo 图片、最大的标题等
- 另外
内部的文字,可以帮助提高 SEO 搜索排名
- 在设置的是 logo 图片时,如果使用插入图,就不能书写搜索关键字
<h1>
<a href=""><img src="images/lagouwang.jpg"> </a>
</h1>
背景图替换插入图方法
- 如果想解决 SEO 问题,可以将 HTML 结构中,插入图换成搜索关键字,然后使用 css 添加背景图给标签或标签
<!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>
* {
margin: 0;
padding: 0;
}
h1 {
width: 200px;
height: 100px;
}
h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
}
</style>
</head>
<body>
<h1>
<a href=""> 今天|太阳|真好|666 </a>
</h1>
</body>
</html>
文字隐藏方法
1、将字号设置为 0。IE8 及以上或高版本 浏览器可以隐藏文字,但是 IE7 及以下有 兼容问题
font-size: 0;
2、可以设置给标签一个 text-indent 属性,属性值为负的很大的值,文字会走到盒子外部,直接再设置溢出隐藏属性,将溢出文字隐藏
h1 a {
display: block;
width: 200px;
height: 100px;
background: url(images/lagou_small.jpg) no-repeat;
/* font-size: 0; */
text-indent: -20em;
overflow: hidden;
}
②、padding 区域背景图
- 在一个盒子中有背景图部分,而且有文字内容,文字会让开背景图区域进行加载,背景区域应该使用 padding 挤出位置
- 四个方向的 padding 都可能用于添加背景图
.list {
width: 300px;
padding-left: 10px;
border: 1px solid #000;
margin: 10px;
list-style: none;
font: 16px/32px "楷体"
}
.list li {
padding-left: 25px;
background: url(images/tubiao.png) no-repeat left center ;
}
③、精灵图技术
- 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户
- 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时, 服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度
- 为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)
css 精灵
- CSS 精灵是一种处理网页背景图像的方式
- 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来
- 通常情况下,这个由很多小的背景图像合成的大图被称为精灵图
css 精灵的技术依据
- 将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片
- 利用背景定位技术,将精灵图的每个小图片加载到对应的标签上
制作精灵图的注意事项
- 精灵图上放的都是小的装饰性质的背景图片,插入图片不能往上放
- 精灵图的宽度取决于最宽的那个背景图片的标签宽度
- 精灵图可以横向摆放也可以纵向摆放,但是每个图片之间必须留够足够的空白, 保证背景图片加载到一个标签内部时,不能出现多余内容
- 在精灵图的最底端,尽量留一点空白,方便以后添加其他精灵图
可以通过网上的在线进行制作精灵图
八、CSS3 新增背景属性
①、背景半透明
- CSS3 支持背景半透明的写法,颜色值增加了一种 rgba 模式
- rgba 模式:在 rgb 基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全透明,1 表示完全不透明,0.5 表示半透明
- 书写方式:rgba(红色,绿色,蓝色,不透明度)
- 注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响
<!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: 100px;
height: 100px;
}
.p1 {
background-color: rgba(0, 255, 0, 1);
}
.p2 {
background-color: rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<p class="p1"> 原 </p>
<p class="p2"> b半透明 </p>
</body>
</html>
同样, 可以给文字和边框透明,都是 rgba 的格式来写
color: rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.5);
②、背景缩放 background-size
通过 background-size 设置背景图片的尺寸,就像我们设置 的尺寸一样,在移动 Web 开发中做屏幕适配应用非常广泛
| 属性值 | 说明 |
| px 值 | 1 - 2个像素值,只设置 1 个值,垂直方向等比例拉伸,设置2个值,按照设置值加载 |
| 百分比 | 同像素值设置方法相同,设置百分比时,数值参照盒子的宽、高属性 |
| cover | 自动调整缩放比例,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,如有溢出部分则会被隐藏 |
| contain | 自动调整缩放比例,把图像图像扩展至最大尺寸,保证图片始终完整显示在背景区域 |
.box1 {
background-size: 50px 50px;
}
.box2 {
background-size: 50% 50%;
}
.box3 {
background-size: cover;
}
.box4 {
background-size: contain;
}
<div class="box1"> px 值 </div>
<div class="box2"> 百分比 </div>
<div class="box3"> cover </div>
<div class="box4"> contain </div>
③、多背景
- CSS3 中规定,一个盒子上,可以添加多个背景图片
- background-image 的属性值书写时,以逗号分隔多背景的 URL路径地址
- 注意:背景加载时,先写的背景压盖后写的背景图片
background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);
最后:
需要领取全部面试题文档的小伙伴看这里!
更多分享:前端字节跳动真题解析
③、多背景
- CSS3 中规定,一个盒子上,可以添加多个背景图片
- background-image 的属性值书写时,以逗号分隔多背景的 URL路径地址
- 注意:背景加载时,先写的背景压盖后写的背景图片
background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);
最后:
需要领取全部面试题文档的小伙伴看这里!
更多分享:前端字节跳动真题解析
- [外链图片转存中…(img-fHCuEQg8-1627008920775)]