CSS中的background背景和应用

web.jpeg

我们在操作盒子div的时候 一般都会用到背景图片或者背景颜色等属性

1. background-image 背景图片

//设置 div的宽高和样式
 

image.png

2. 如果只设置背景图片，盒子的宽度和高度大于图片的真实大小，图片默认是平铺的 ，这是要用到background-repeat这个属性来更改设置

background-repeat:这个属性 还有2个值 ，repeat-x; x轴上横平铺,repeat-y; y轴上 平铺

image.png

3. 我们看到图片 在左上角显示，如果我们想更改背景图片的位置呢，这就要使用到 background-position属性

image.png

background-position里面使用的方位名词，top,left,bottom,right, 如果方位名词 只写一个 另外一个 默认是center

当然我们也可以精确到准确的位置比如background-position: 10px 10px; 注意:第一个参数值是x抽，第二是参数值是y抽

最后background-position属性是可以和 方位名词和坐标结合写的，比如:background-position: center -20px; 这就说明: 水平居中 垂直方向是 向上走了20像素

4.有时我们需要固定 背景图片需要使用到 background-attachment，此属性默认是scroll,如果我们想让 背景固定的话需要更改成fixed

image.png

7. 背景半透明

这个属性比较简单

8 .背景透明 transparent

9.多背景图片

• background属性，设置多个背景图片，之间用逗号隔开，背景颜色，要放在后面，以免层叠覆盖掉

div{
            height: 500px;
            width: 700px;
            
            background: url("./images/timg.jpeg") no-repeat top left,
            url("./images/web.jpg") no-repeat bottom right pink;

            background-size: 50%;
           
        }

image.png

小例子

主要用到background-position属性，来更改图片的位置

Untitled.gif

10.background-origin

• background-origin背景图片根据盒模型的哪个区域来定位。

• border-box，图片相对于边框（Border）定位，

  
  
  image.png

• padding-box，图片相对于内边距框（Padding）定位

  
  
  image.png

• content-box，图片相对于内容框（Content）定位。

           padding: 20px;
           background-image: url("JD/images/banner_1.jpg");
            background-repeat: no-repeat;
            background-origin: content-box;

image.png

11. background-clip

• background-clip背景绘制区域，也就是背景可以被绘制的区域，基于盒模型 和 background-origin一样有
  border-box：边框以外被裁剪
  padding-box：内边距以外被裁剪
  content-box: 内容以外被裁剪
  3个属性