前端基础-CSS背景属性

背景属性

a) 背景颜色

语法：background-color:颜色值

示意图

b) 背景图片

语法：background-image:url(图片路径)

示意图

c) 设置背景图片是否平铺

语法：background-repeat:值

取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认

示意图

d) 设置背景图片位置

语法：background-position:水平位置，垂直位置

位置的取值可以为像素（相对左上角定点的位置），也可以为关键字：top left bottom right center

示意图

多学一招：

1.还可以使用百分比，不太常用：位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比，如下图：

示意图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e83lE2oV-1585552032704)(img/背景定位的百分比.png)]

2.在使用位置关键字的时候，关键字的前后顺序对结果不产生影响

3.可以只有一个值，代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素

4.当只有一个值，且值为上下左右关键字时，上下左右只能代表x轴或y轴之一，另一个方向默认为center

e) 设置背景图片大小

语法：background-size:宽度 高度

宽高取值可以是像素也可以是百分比

示意图

f) 综合使用

语法：background:颜色 url(图片路径) 平铺类型 位置/大小

示意图

多学一招：属性中的每个值顺序可以调整，且background可以为单独其中之一设置

g) 设置背景是否受滚动条的影响

语法：background-attachment:值

取值：

​ （1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失----默认

​ （2）fixed不会受滚动条影响，一直保持在视线范围内

示意图

背景可以设置为透明

background:rgba();  /* a代表透明度，取值为0-1 */

背景和图片标签都可以让页面中显示图片，那有什么区别？

img和背景图片的区别：
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的 需要专门写宽高
一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

h) 背景颜色渐变

①线性渐变

语法：

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<point>
    left： 设置左边为渐变起点的横坐标值。 
    right： 设置右边为渐变起点的横坐标值。 
    top： 设置顶部为渐变起点的纵坐标值。 
    bottom： 设置底部为渐变起点的纵坐标值。 
	<angle>： 用角度值指定渐变的方向（或角度）,单位deg。 
<color-stop>： 指定渐变的起止颜色。 <color-stop>
    <color>： 指定颜色。请参阅颜色值 
    <length>： 用长度值指定起止色位置。不允许负值 
    <percentage>： 用百分比指定起止色位置。 

写法一：

代码：

<div></div>
<style type="text/css">
    div{
    
        width:300px;
        height:200px;
        background:linear-gradient(red,black); 
        /* 表示颜色从上往下，从红色到绿色转换，各占50%(默认) */
    }
</style>

效果图

写法二：

代码

<div></div>
<style type="text/css