CSS 的背景属性(开发中常用)

目录

1 内容预览

背景颜色

背景图片

背景平铺

背景图片位置(常用)

背景图像固定

背景复合写法

背景色半透明

实现案例


1 内容预览

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

CSS 的背景属性(开发中常用)_第1张图片

注意:

把表格中的五个属背下来,然后写一下练习关于css的背景属性应该就有大概的了解了,但还是的在实践中加深巩固。

背景颜色

CSS 的背景属性(开发中常用)_第2张图片

背景图片

CSS 的背景属性(开发中常用)_第3张图片

背景平铺

CSS 的背景属性(开发中常用)_第4张图片

背景图片位置(常用)

CSS 的背景属性(开发中常用)_第5张图片

1. 参数是方位名词

 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致

 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

2. 参数是精确单位

 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标

 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

3. 参数是混合单位

 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

背景图像固定

CSS 的背景属性(开发中常用)_第6张图片

背景复合写法

CSS 的背景属性(开发中常用)_第7张图片

背景色半透明

CSS 的背景属性(开发中常用)_第8张图片

实现案例

案例1:五彩导航栏

CSS 的背景属性(开发中常用)_第9张图片





    
    
    
    Document

    





    


案例2:




    
    
    
    Document
    


    
成长守护平台

你可能感兴趣的:(前端,css,前端)