背景
CSS 背景属性用于定义 HTML 元素的背景。
1.标签的背景颜色:
background-color:属性, 就是专门用来设置标签的背景颜色的
bc background-color: #fff;
2.裁剪背景:
background-clip: border-box;(默认值)
/*
border-box 背景被裁剪外边框。
padding-box 背景被裁剪内边框（border内）。
content-box 背景被裁剪到内容框。
*/
注意：如果遇到圆角属性，背景由background-clip先裁剪，再由border-radius进一步裁剪
3.设置背景图片:
background-image: url();就是专门用于设置背景图片的
如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充；
使用背景图片搭配背景色最好；
4.背景图片的平铺方式:
background-repeat:repeat 默认, 在水平和垂直都需要平铺
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
应用场景:
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
5.背景图片的位置:
background-position:水平方位，垂直方位；
background-position:center top;
/*可以让最重要的部分位于网站中间，不随窗口变化而*/
取值
默认情况下是左上角
2.1具体的方位名词(如果只设置一个方位，另一个方位默认center)
水平方向: left center right
垂直方向: top center bottom
2.2百分比(如果只设置一个方位，另一个方位默认50%)
background-position:50% 50%;
把源图像的中点与与元素背景的中点对齐
2.3具体的像素
相对于元素背景左上角位置的偏移，（源图像的偏移点是左上角）
例如: background-position: 100px 200px;
特殊性：改变偏移边
以前：(值只能为2个，相对背景区域左上角偏移)
background-position: 33% 20px;
这句话的意思是把源图像放在距左上角横向三分之一的位置，纵向20px处
现在：
background-position: left 33% top 30px;
相对左边界横向偏移33%，相对上边界纵向偏移30px
6.源图像的位置:
background-origin属性确定计算源图像的位置以什么边界为基准
取值：
border-box 背景被裁剪外边框。
padding-box 背景被裁剪内边框（border内）。（默认）
content-box 背景被裁剪到内容框。
7.背景关联方式:
默认情况下背景图片会随着滚动条的滚动而滚动;
如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式;
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
格式
background-attachment：scroll;
取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
8.背景图片尺寸:
1.改变源图像的尺寸：
background-size:500px auto；（宽高比不变）
/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
2.图像完全覆盖背景，且不在乎有部分图像超出背景区域：
background-size:cover；（宽高比不变）
/*
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。
该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
*/
3.缩放背景图片以完全装入背景区：
background-size:contain；（宽高比不变）
/*
缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。
该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示
由 background-color 设置的背景颜色。
*/
9.背景属性缩写的格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
background: red url(images/girl.jpg) no-repeat left bottom;
注意点：
background属性中， 任何一个属性都可以被省略
10.背景图片和插入图片区别:
1.1背景图片仅仅是一个装饰, 不会占用位置，插入图片会占用位置.
1.2背景图片有定位属性, 所以可以很方便的控制图片的位置;
插入图片没有定位属性, 所有控制图片的位置不太方便.
1.3插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
11.背景图片拼接:
思路
-
1.div 嵌套----设置两个 div，把大的图片的 div 里面嵌入小的 div，然后给小图片定位
-
2.背景定位--小的 div 设置与大 div 一样的宽高，然后给小的 div 设置背景图片定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>39-背景图片练习</title>
<style>
.box1 {
width: 1024px;
height: 768px;
background-image: url(images/bybg.jpg);
}
.box2 {
/*background-color: red;*/
width: 1024px;
height: 768px;
background-image: url(images/bybottom.png);
background-position: center bottom;
background-repeat: no-repeat;
/*background-position: 100px 200px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
12.CSS 精灵图
1.CSS精灵图是一种图像合成技术,把需要用到的一些图像整合到一张大图片上
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
4.替代方案
字体图标替代精灵图
渐变
渐变是指从一个颜色到另一个颜色的平滑过渡，最常使用在背景图片中；
线性渐变
抒写样式：
background: linear-gradient(red, green);/*默认情况下会从上至下的渐变*/
定义方位：
background: linear-gradient(to top ,red, green);/*从下至上渐变*/
/*
to right从左至右 ，
to left 从右至左 ，
to top right 往上右方向渐变
45deg 45°角渐变
*/
注意：
1.至少需要传递2个颜色, 至多没有上限
2.默认情况下自动回自动计算纯色和渐变色的范围, 但 是，我们也可以手动指定的格式: 颜色 范围；
background: linear-gradient(to right, red 100px, green 200px, blue 300px);
/*只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围*/
径向渐变
径向渐变: 默认从中心点向四周扩散
background: radial-gradient(red, green);
background: radial-gradient(at top left ,red, green);
/*径向渐变: 可以通过at 关键字的方式修改开始渐变的位置 */
background: radial-gradient(at 200px 100px ,red, green);
/*径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置*/
background: radial-gradient(100px, red, green);
/*径向渐变也可以指定扩散的范围
background: radial-gradient(100px at 200px 100px ,red, green);
/* 如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面*/
