04-背景相关属性【背景颜色，背景图片，背景平铺，背景位置，img与背景图片的区别】

目录

1、背景颜色

2、背景图片 

3、背景平铺 

4、背景位置 

5、background复合属性连写

6、背景图和img的区别 

---

1、背景颜色

• 属性名：backgrou-color   例如：  background-color:pink
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
• 默认是透明：  rgba（0,0,0,0） 【最后显示透明度】，  transparent

2、背景图片 

• 属性名：backgroud-image （快捷：  bgi）
• 属性值：background-image：url（‘图片路径’） 

#图片会覆盖整个标签，即便是用重复的方式 

#默认为水平和垂直平铺

#效果图：

 

3、背景平铺 

• 属性名：background-repeat  （快捷bgr）
• 属性值： 

• #背景图 覆盖 在背景色 上面 

4、背景位置 

• 属性名：background-position   （快捷： bgp）
• 作用：从所选的位置，开始移动相对应的px
• 属性值：

# 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

#直接方位角，就不需要添加数值   background-position ： right bottom

#！负值代表反方向移动，但盒子不显示超过边缘的图片

<style>
        div {
            width: 600px;
            height: 600px;
            background-image: url(./00-媒体文件/a4.jpg);
            background-repeat: no-repeat;
            background-position:left 40px top 30px;
            /* 可以仅命名一个方向 但两个的话必须同时设置参数 否则只会生效单命名方向 */
            background-color: pink;
            /* 背景颜色不受后编程覆盖的影响 默认是在底部页面的 */
        }
    </style>

5、background复合属性连写

• background：color  image（url）  repeat  position 

#背景色  背景图  背景图平铺  不分先后顺序

#背景图位置 英文单词不分顺序  纯数字分顺序

6、背景图和img的区别 

• 1、img标签是一个标签，不设置宽高默认会以原尺寸显示
• 2、div + 背景图片 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

#img用于网页中重要的图片（产品图） ，背景图片就用于非重要（修饰作用，方向标）