css中的背景设置

css中的背景设置

设置背景颜色

background-color

引入背景图片

background-image:url("图片的路径")

设置图片的重复方式

background-repeat:
                   可选值：repeat(默认值，背景会沿x轴和y轴方向重复)
                          repeat-x(背景沿着x轴方向重复)
                          repeat-y(背景沿着y轴方向重复)
                          no-repeat(背景图片不重复)

设置背景图片的位置

通过top left right bottom center 几个表示背景图片在其设置背景的元素的位置

如：background-position:top left

表示的是在其设置的背景的元素的左上

注意:如果只写一个值则第二个值默认为center

如：background-position:top

表示的是在其设置的背景的元素的上中

通过偏移量来指定背景图片的位置（常用）

如：background-position:-50px 300px

表示背景图片向x轴的负半轴移动50px，向y轴的正半轴移动300px

设置背景的范围

background-clip

​ 可选值：

​ border-box 默认值，背景会出现在边框的下边

​ padding-box 背景不会出现在边框，只出现在内容区和内边距

​ content-box 背景只会出现在内容区

边框也会被设置背景颜色，只不过被边框的颜色掩盖了，可以将边框属性设置为double来看background-clip是否设置成功。

设置背景图片的偏移量计算的原点

background-origin

​ 可选值：

​ padding-box 默认值，background-position从内边距开始计算（以内边距的左上角为坐标原点）

​ content-box 背景图片的偏移量从内容区计算(以内容区的左上角为坐标原点)

​ border-box 背景图片的原点在边框的左上角

设置背景图片的大小

background-size:500px 200px;

​ 第一个值表示宽度

​ 第二个值表示高度

​ *如果只写一个，则第二个默认为auto

​ 可选值：

​ cover 图片的比例不变，将元素铺满，但图片大于元素的部分不会显示出来

​ contain 图片等比例放大、缩小，将图片在元素中完整显示

设置背景图片是否会跟随元素移动

background-attachment

当元素高度超过盒子高度时，使用overflow:auto处理溢出内容会生成一个滚动条，background-attachment就是设置背景图片是否会由于滚动条的滑动而滑动

​ 可选值：

​ scroll 默认值，背景图片会随元素移动

​ fixed 背景会固定在页面中，不会随元素移动（类似于定位中的固定定位）

背景相关的简写属性

background:

background背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且没有顺序要求，也没有哪个属性是必须写的。

注意：

​ 1.background-size必须写在background-position的后边，并且使用/隔开

​ backgrund-position/background-size

​ 2.background-origin background-clip 这两个样式的属性值一样，所以简写时origin要在clip的前边

​ background-origin background-clip

学习视频

(【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通_哔哩哔哩_bilibili )