图片显示的规则：

Posted 2022-03-03 bear159412

图片显示的规则：

　　　　　　　　　　（1）如果图片 大于 容器的时候，只显示容器中的图片

　　　　　　　　　　（2）如果图片 小于 容器的时候，默认情况下，图欧安会平铺，直到铺满整个容器为止

　　　　　　　　　　（3）如果图片 等于 容器的时候，刚好显示完整的图片也不会平铺

 

 

图片比容器大，但是仍然希望显示完整的图片？

　　　　　　　　　　使用background-size属性：

　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　（1）数值 或者 百分比。有两个属性值，第一个属性值表示图片宽度，第二个属性值表示图片高度

　　　　　　　　　　　　　　　缺点：图片会压缩变形

　　　　　　　　　　　　　　（2）auto 默认值，图片不会被压缩，但是图片有可能显示不完全　

　　　　　　　　　　　　　　（3）cover---覆盖

　　　　　　　　　　　　　　　　如果图片大于容器的时候，图片会等比例缩小，直到某一边完全显示在容器中就停止缩小

　　　　　　　　　　　　　　　　如果图片小于容器的时候，图片等比例放大，直达容器完全被覆盖就停止方法

　　　　　　　　　　　　　　（4）contain--包含

　　　　　　　　　　　　　　　　如果图片大于容器的时候，图片会等比例缩小，直到图片完全显示在容器中就停止缩小

　　　　　　　　　　　　　　　　如果图片 小于容器的时候 ，图片会等比例放大，直到某一边完全覆盖容器就停止方法

 

 

 

背景图从padding位置开始去排放

　　　　　　　　　　　　1、background-origin--设置背景图从什么位置开始放

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　border-box---表示背景图从边框位置开始放

　　　　　　　　　　　　　　　　padding-box（默认值）---表示背景图从padding位置开始放

　　　　　　　　　　　　　　　　content-box---表示背景图从内容区域开始放

　　　　　　　　　　　　2、background-clip---设置背景最终显示的区域

　　　　　　　　　　　　　　　　（1）border-box--表示背景显示border以内的区域

　　　　　　　　　　　　　　　　（2）padding-box--表示背景显示在padding以内的区域

　　　　　　　　　　　　　　　　（3）content-box--表示背景显示在content里面