CSS - background属性

复习一下css的background属性

background属性是一种简写的属性

background可以设置的属性有:

background-color

设置元素的背景色

background-color: pink;

background-color: #ff0000;

/* rgba可以设置背景颜色的透明度,也可以使用opacity属性控制透明度 */
background-color: rgba(15, 235, 250, .5);

background-image

设置元素的背景图像

/* 设置一个 */
background-image: url("../images/xxxx.png");
/* 设置多个 */
background-image: url("../images/xxxx.png"),
                  url("../images/yyyy.png");

background-attachment

设置背景图像的位置是在视口内固定,或者随着包含它的区块滚动

scroll:1、包含背景图片的元素,具有滚动条时:该元素的滚动条滚动时,图像固定不随着滚动;

​ 2、只有外层的页面滚动条滚动时:背景图像随着滚动。

local:满足scroll的1、2条件,local下图像都会滚动。

fixed:图像都会固定在视口

background-attachment: scroll;
background-attachment: local;
background-attachment: fixed;

background-position

设置背景图片的初始位置

首先,background-position是相对于background-origin设置的位置定义的

其次,background-position是以x(z左侧),和y(顶部)轴进行图像的定位

x:left,right

y:top,bottom

background-position: x y;

background-position: top | bottom | left | right | center | 20px | 50%;

/* 1、一个值 */
background-position: left;/* 水平靠左,垂直居中。另一个y默认是50%(center)所以是垂直居中的 */
background-position: 20px;/* 水平距左20px,垂直居中。也可以是具体的长度,*/ 

/*2、两个值 */
background-position: left center; /*图像水平靠左,垂直居中。如果是top bottom的组合,是无效的 */
background-position: 20px 20px;/*水平距左20px,距离顶部20px */
background-position: left 20px;/*水平靠左,垂直距顶部20px */

/*3、三个值 */
background-position: left top 20px;/* left top设置的x,y,20px则是top的偏移量 */
background-position: left 20px top;/* left top设置的x,y,20px则是left的偏移量 */

/*4、四个值 */
background-position: bottom 50px right 100px;
/*bottom right设置的x,y,50px,100px则是前面一项的偏移量 */

ps:有些组合是自相矛盾的例如bottom top组合,,则无效果

background-repeat

定义背景图像的重复方式,也就是定义背景图像的平铺方式

/*
repeat: 铺满整个元素,不够的的会对图像进行裁剪
repeat-x:沿水平方向平铺图像,不够的的会对图像进行裁剪
no-repeat:不平铺
具体可见mdn
 */
/* 单值语法 */
background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
/* 双值语法 
/* 第一个值:水平重复;第二个值垂直重复 */
background-repeat: repeat space | repeat repeat | no-repeat round;

background-size

设置背景图片大小

/* 
auto: 以背景图片的比例缩放背景图片
cover: 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见,与contain相反,图像不会被压缩
contain: 缩放背景图片以完全装入背景区,可能背景区部分空白,图像不会被压缩

*/

/* 关键字 */
background-size: cover;
background-size: contain;

/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* 两个值 */
/* 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

background-origin

规定了指定背景图片background-image属性的原点位置的背景相对区域

background-origin: border-box; /* 背景图片的摆放以border区域为参考 */
background-origin: padding-box;
background-origin: content-box;

background-clip

设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面

background-clip: border-box; /* 背景延伸至边框外沿(但是在边框下层)。 */
background-clip: padding-box; /* 背景延伸至内边距(padding)外沿。不会绘制到边框处。*/
background-clip: content-box; /* 背景被裁剪至内容区(content box)外沿。*/
background-clip: text;  /* 背景被裁剪成文字的前景色。*/

最后

以上都可以写在一些,减少代码量如:

background: #ff0000 url("../images/xxxx.png") scroll no-repeat cover;

Ps:总结不全,具体还需参考background - CSS(层叠样式表) | MDN (mozilla.org)