第九天

79 阅读1分钟

background-clip

设置元素的背景(图片或颜色)是否延申到边框,内边距盒子,内容盒子下面

  • blackground-clip:center box;只有内容区有

  • blackground-clip:boder box; 延申到boder(默认值)

  • blackground-clip:pandding box; 延申到pandding

blackground-color

背景颜色

blackground-image

为元素设置一个或多个背景 设置多个背景记得用逗号隔开

blackground-image:url('图片路径’) blackground-image:url('图片路径','图片路径‘)

blackground-position

用来设置图片的位置 设置方式:

   通过 top  bottom  lerf  right  center几个表示方位的词来设置背景图片
   必须同时使用两个方位词,如果只写一个另一个默认为center
   

blackground-repeat

  • blackground-repeat:repeat-x;延x轴平铺

  • blackground-repeat:repeat-y;延y轴平铺

  • blackground-repeat:repeat 延xy轴都平铺(默认值)

  • blackground-repeat:no-repeat 不平铺

blackground-size

设置背景图大小

第一个值表示宽度

第二个值表示高度

如果只写一个值,另一个值默认auto;

  • 100% auto 宽度和容器一致,高度自适应。(图片不变形但不一定可以铺满)

  • auto 100% 高度和容器一致,宽度自适应。(图片不变形但不一定可以铺满)

  • 100% 100%宽高和容器一致。(可以铺满,图片不变形)

  • cover (以当前最适应得缩放比例铺满容器,但图片不一定展示全)

background-attachment

图片是否跟着元素移动

background-attachment:scroll会跟着元素移动(默认值)

background-attachment: fixed会固定在图片中,不会跟着元素移动

复合在一起写

blackground:图片地址 平铺方式 位置信息 背景颜色

blackground-size:cover(一般单独写)