CSS基础-背景

CSS背景 background

纯色背景

{background-colcor:gray; padding:20px}

　　为元素设置背景色，并设置了内边距，使得元素中的文本向外少有延伸。

　　用rgba设置背景颜色，例如半透明的黑色：rgba(0,0,0,0.5)，前三个参数是红绿蓝，最后一个参数可以实现透明度的设置。

也可以用opacity: 0.x 设置透明度，但是这会将整个元素，包括文字部分一起实现透明。

 

图片背景

{background-image:url(图片地址);}

　　一般来说，背景图像应用在body上，不过也可以应用在行内元素、超链接等元素上。

　　同样的，也可以用padding设置内边距。

 

背景重复

{background-image:url(图片地址); background-repeat:repeat/repeat-x/repeat-y/no-repeat; }

　　repeat表示在x和y方向上都平铺

 

背景定位

　　　可以利用background-position属性改变背景图片的位置

• 利用center、top、bottom、left、right等关键字定义位置。

通常需要这些关键字成对出现，并且只有一对；如果只有一个关键字，那么另一个默认为center。

例如，left等价于left center。

 

• 还可以使用长度值，100px/5cm等，以左上角为偏移点

比如，background-position：50px 100px；

指的是图像距离左上角向右50px, 向下100px。

 

• 也可以用百分数

用两个百分数表示，第一个表示垂直方向，第二个表示水平方向。如果只提供一个百分数，默认理解为水平值。

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。

也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。 未理解

 

• 4-value语法

　　例：top 200px right 300px

 

 

背景关联

　　通过background-attachment：fixed 申明图像不随背景滚动（scroll）,而是相对于可视区是固定的。

 

调整背景图像大小

利用background-size属性调整图像大小。

可以用关键字

• contain 使图像适合在盒子内，保持其高宽比，但是可能存在一定间隙。
• cover 使图像完全覆盖盒子，保持其高宽比，但是可能损失一部分图像。

       

 　　　　　　contain　　　　　　　　　　　　　　　　　　　　cover

 

渐变背景

可以用linear-gradient函数创建两种或多种颜色的渐变背景，是一种特别的<image>数据类型。

示例：

/*无方向指示时，默认从上到下渐变*/
background: linear-gradient(#e66465, #9198e5);

/* 渐变轴为45度，从蓝色渐变到红色 */
background-img: linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */ 
background-img: linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-img: linear-gradient(0deg, blue, green 40%, red)

/*水平旋转1/4圈(90°)，蓝色、白色、黄色三色渐变*/
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);  见右图

 

     渐变的更多知识

 

多个背景图像

在background-img中，填入多个图像url就可以实现多个背景重叠展现：

background-image:url(image1.jpg),url(image2.jpg);

注意：

• 这里image1在上，image2在下，添加的背景图片按顺序叠放在下。
• 其他background属性的值也可以 以逗号分隔的方式与其他属性中相同位置的值匹配。
• 背景图片与渐变背景叠加可能会产生不错的效果。

 

 

给背景图片增加颜色遮罩

例如：把第一张图片变成第二张图片

  -----》

方法

.background1{
    background: url(./img/img2.png) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
}

不需要position绝对定位，随着当前背景图变化，非常方便。