【自学CSS笔记第5篇】——CSS设置背景（这一篇就够了）

我总是花很多很多的时间，在最珍贵的年纪去和别人讲道理，去让那些与我的人生没有多大关系的人理解我的意思，传达我自己单方面的情愿，借着为别人好的机会，倾诉自己、鼓励自己、鸡汤自己。

目录

背景颜色：

背景图片：

渐变背景 ：

背景平铺

背景图大小：

背景图像位置：

background简写： 

---

背景颜色：

•  background-color  属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到内容和内边距的下面。

案例：   HTML代码如下：

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
<!--此处的span标签用法，值得注意、学习-->
</div>

使用CSS进行背景修饰：

.box {
  background-color: #568789;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgba(255,255,255,.5);
}

 效果如下：

背景图片：

•  background-image 属性允许在元素的背景中显示图像。background-color 只是设置了单一的背景颜色，而 background-image 可以设置图片背景；

 案例：HTML代码如下：

 <div class="box1">
      <h2>Background image</h2> 
 </div>

使用CSS进行背景修饰：

  .box1{
        background-image: url(./2.jpg);
    }

 效果如下：

渐变背景 ：

CSS 定义了两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）；
• 径向渐变（有中心向周围展开）；

•  取值：
                  to top : 从下向上填充渐变色
                  to right:从左向右填充渐变色
                  to bottom:从上向下填充渐变
                  to left  :从右向左填充渐变色

                  0deg  : 0度->to top
                  90deg: 90度->to right
                  180deg:180度->to bottom
                  270deg:270度->to left

通过属性 linear-gradient来这样定义一个线性渐变。

background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);
<!--示例1（角度）-->background-image: linear-gradient(45deg, #FF0000,#FFF200, #1E9600);
<!--示例1（方向）-->background-image: linear-gradient(to left,  #567895,#FFF200, #569700);

示例：

background: linear-gradient(to right,#333399,#ff00cc);

 效果：

背景平铺

•  background-repeat  属性用于控制图像的平铺行为。可用的值是：

 no-repeat  — 不重复。
 repeat-x  —水平重复。
 repeat-y  —垂直重复。
 repeat  — 在两个方向重复。

背景图大小：

• 我们可以使用  background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

 cover  —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，但是可能会使图像跳出盒子外；
 contain  — 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现空白；

背景图像位置：

•  background-position  属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。

最常见的背景位置值有两个单独的值——第一个表示水平值，第一个表示垂直值;

例如：background-position: right,center ;  显示在盒子的水平最右边的垂直最中间位置； 

background简写： 

background也是复合属性，可以简写；简写遵循规则注意点：

• background-color 只能在逗号之后指定。
• background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。

---

如果感觉写的不错，欢迎收藏本专栏，后期会持续更新相关知识点；