背景图片设置

目录

一、背景贴图方式

二、重复效果（background-repeat）

三、图片位置

1、像素方式

2、九宫格方式

四、图片大小（background-size）

五、图片偏移位置原点（background-origin）

六、背景图裁剪显示方式（background-clip）

七、代码

---

一、背景贴图方式

通过url贴链接，最好加上双引号

background-image: url("../src/milk.jpg");

二、重复效果（background-repeat）

（1）no-repeat

（2）repeat-x，沿x轴方向重复

（3）repeat-y，沿y轴方向重复

（4）repeat默认值，铺满整个区域

三、图片位置

1、像素方式

两个参数，以像素作为x，y轴的标尺

2、九宫格方式

（1）两个参数，可选值有center，left，right等，top、right就表示右上角

（2）一个参数，可选值与上面相同

四、图片大小（background-size）

（1）以像素或者比例的方式设置

（2）第一个值表示宽度，第二个值表示高度

（3）如果只写一个，则第二个值默认是auto

（4）可以通过background-size：100% atuo的方式来填充内容，这样会按照原图片比例缩放

五、图片偏移位置原点（background-origin）

（1）默认值是padding-box

（2）conten-box表示背景图片偏移量从内容区开始计算

（3）border-box表示背景图片偏移量从边框区开始计算

六、背景图裁剪显示方式（background-clip）

（1）border-box默认值，背景会出现在边框下方

（2）padding-box背景不会出现在边框，出现在内容区和内边距

（3）content-box背景只出现在内容区域

七、代码

    
    
    
    
    


    

        

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, earum iste odio harum corporis asperiores ducimus deleniti culpa voluptatum minima ea possimus esse maxime autem consequuntur aut quos quis nobis.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, animi temporibus facilis ad adipisci eius obcaecati molestias at aperiam eos, suscipit nostrum sint molestiae, ex quos magnam reprehenderit officia veniam.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis atque aspernatur aut illo natus consequuntur voluptatibus quod aperiam vitae pariatur culpa sed repudiandae repellat earum iste, esse quia ipsum facere!