西安网站建设设计的好公司排名/爱站网长尾词挖掘工具
文章目录
- 1. 使用场景
- 2. 用法
- 5. 背景平铺
- 7. 背景图片显示基点
- 8. 背景图片裁剪（background-clip）
- 9. 背景图片关联依附
- 10. overflow 样式
- 11. 复合样式写法
1. 使用场景
保证图片不变的情况下使用
2. 用法
（1）背景颜色 background-color: red;
（2） 背景图片 background-image: url(./images/1.jpg);
（3）背景位置 background-position : 100px 100px （左上）
center 背景居中
（4）背景大小 background-size: 100px 100px;
cover: 图片等比缩放直到刚好覆盖背景区域
contain: 图片等比缩放,直到有一条边触碰到边框就停止
5. 背景平铺
默认处于平铺状态，使用时不平铺
background-repeat: repeat no-repeat; （x方向平铺，y方向不平铺）
div {width: 1200px;height: 600px;background-image: url('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1600570336&di=3232ecf53c57b44a13a0d4157e6f338e&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg');background-size: 100px 100px;/* background-repeat: no-repeat repeat; */}
7. 背景图片显示基点
默认情况下：
背景不平铺：基点在边框线外边距开始
背景平铺： 基点在边框线内边距开始
背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置
content-box: 背景图片内容区左上角开始（内容区域开始）
padding-box: 背景图片从内边距左上角开始（padding开始）
border-box: 背景图片相当于边框左上角开始（边框左上角）
8. 背景图片裁剪（background-clip）
背景图片从开始裁切: background-clip
content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片(默认)
border-box: 显示内容区、内边距和边框部分的图片
9. 背景图片关联依附
背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。
fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
10. overflow 样式
overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理
（1）overflow：visible;（默认）超出部分正常显示
（2）overflow: hidden; 超出部分隐藏
（3）overflow: scroll; 超出部分以滚动条显示
（4）auto 自动适应
11. 复合样式写法
背景是复合属性:
background: color image repeat attachment position/size；
如： background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
省略部分会被默认值替代,
position和size之间要用/分割
颜色 路径 平铺 依附 位置 / 尺寸