以下代码均基于一个div盒子作介绍
目录
目录
8. background-clip 和 background-origin的结合
1. background-color
作用:设置背景颜色
div {
width: 200px;
height: 200px;
/* 1. 直接设置英文 */
/* background-color: pink; */
/* 2. 设置十六进制 */
/* background-color: #fff; */
/* 3. 设置rgb颜色模式 */
/* background-color: rgb(0, 0, 0); */
/* 4. 设置透明度 */
background-color: rgba(0, 0, 0, .3);
}
2. background-image
作用:插入背景图片
参数:填写url地址
div {
width: 200px;
height: 200px;
background-image: url(./1111.jpg);
}
3. background-repeat
作用:设置背景平铺;平铺的意思,可以理解为,如果盒子很大,背景图片没那么大,设置了平铺,就能够铺满盒子(的某个方向)
div {
width: 900px;
height: 2000px;
background-image: url(./1111.jpg);
/* 1. 参数1:repeat 表示 x轴和y轴都铺满 */
background-repeat: repeat;
/* 2. repeat-x 表示 x轴铺满 */
background-repeat: repeat-x;
/* 3. repeat-y 表示 y轴铺满 */
background-repeat: repeat-y;
/* 4. 表示不平铺 */
background-repeat: no-repeat;
}
4. background-position
作用:调整背景图片的位置。以盒子的左上角的顶点为0,0的起点
div {
width: 900px;
height: 900px;
background-image: url(./1111.jpg);
background-repeat: no-repeat;
background-position: 10px 10px;
// 第一个值是x轴,第二个值是y轴
// x轴正方向向右,
// y轴正方向向下
}
5. background-size
作用:调整背景图片的大小
5.1 px
- 直接给大小 第一个值是宽度 第二个值是高度
div {
width: 500px;
height: 500px;
border: 1px solid #000;
background-image: url(./2.jpg);
background-repeat: no-repeat;
background-size: 500px 500px;
}
- 如果只给一个值,第一个值是宽度,第二个值会设置为自动调整,根据原比例 调整
div {
width: 500px;
height: 500px;
border: 1px solid #000;
background-image: url(./2.jpg);
background-repeat: no-repeat;
background-size: 500px;
}
5.2 百分比
- 给百分比 相较于父盒子宽度和高度的百分比
div {
width: 500px;
height: 500px;
border: 1px solid #000;
background-image: url(./2.jpg);
background-repeat: no-repeat;
/* 2. 给百分比 相较于父盒子宽度和高度的百分比 */
background-size: 100% 100%;
/* 图片可能会变形 */
}
5.3 cover
- 效果是图片能够完整显示,但是可能不会铺满盒子
div {
width: 500px;
height: 500px;
border: 1px solid #000;
background-image: url(./2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
5.4 contain
- 效果是能够铺满整个盒子,但是图片可能显示不完全
div {
width: 500px;
height: 500px;
border: 1px solid #000;
background-image: url(./2.jpg);
background-repeat: no-repeat;
background-size: contain;
}
-------------第二次更新
6.background-clip
背景的内容能够在哪里绘制
取值:
content-box
padding-box
border-box
<div>
1233333333333333333333
</div>
div {
width: 400px;
height: 200px;
padding: 35px;
background-color: pink;
border: 5px dotted #000;
background-clip: padding-box;
}
如果是值:padding-box:背景内容在边框以内开始绘制
如果是content-box:背景内容在padding以内开始绘制
如果是border-box:背景内容在边框开始绘制
7. background-origin
默认值是padding-box
注意:
MDN:当使用 background-attachment 为fixed时,该属性将被忽略不起作用。
div {
width: 400px;
height: 200px;
padding: 35px;
border: 5px dotted #000;
background-repeat: no-repeat;
background-origin: content-box;
background-size: 100px;
background-image: url(./1111.jpg);
}
背景图片的绘制区域
- border-box: 背景图片从左上角边框开始绘制
- padding-box:背景图片从左上角边框内部开始绘制
- content-box:背景图片从padding内部开始绘制
8. background-clip 和 background-origin的结合
这两个属性如果开发中使用了,看了一些文章是建议结合使用的。
原来在思考clip和origin的区别是什么?发现本质就不同。
origin是背景内容从哪里开始绘制
clip是裁剪,我不管你从哪里开始绘制,但是规定比如content-box设置好,只能内容区域有内容,其他都会被裁剪。
比如设置一个div属性如下
div {
width: 500px;
height: 500px;
border: 10px dotted black;
padding: 30px;
background-image: url('../../images/1111.jpg');
background-size: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
background-clip: content-box;
}
如上图可以看到 尽管origin设置了border-box,但是clip设置了content-box,所以clip还是算老大一些哈!
9. background-attachment
/* 1. 背景简写 无需记住顺序 随意即可 */
/* 2. background-attachment: fixed | scroll */
/* 2.1 fixed 表示整个浏览器都滚动了 元素的背景图也不动 除非元素也滚没了 */
/* 2.2 scroll 表示元素滚动了,元素的背景图片不变化 但是视口【整个浏览器】变化了 元素就会发生变化 */
.straight {
width: 400px;
height: 400px;
border: 1px solid pink;
/* 1. 背景简写 无需记住顺序 随意即可 */
/* 2. background-attachment: fixed | scroll */
/* 2.1 fixed 表示整个浏览器都滚动了 元素的背景图也不动 除非元素也滚没了 */
/* 2.2 scroll 表示元素滚动了,背景图片不变化 但是视口变化了 元素就会发生变化 */
/* background: transparent url('./3.jpg') no-repeat 10px 10px/10% 10% scroll; */
overflow: scroll;
background-attachment: fixed;
/* background-attachment: scroll; */
}
html结构类似
<div>
// 里面内容很多撑大盒子
<p>123</p>
<p>123</p>
<p>123</p>
……
</div>
外面是body 也把内撑大使得浏览器能够换行
10. 连写
注意: 1. 背景简写 无需记住顺序 按需添加即可 2. 但是 10px 10px/ 10% 10% 这个表示的是background-position / background-size 这两个通过/分隔要有顺序
div {
width: 400px;
height: 400px;
border: 1px solid pink;
background: transparent url('./3.jpg') no-repeat 10px 10px/10% 10% scroll;
}
<div></div>
结尾:
学习id: 201903090124-7
现在是大三学生,学习到了前后端交互的git阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。