首页 > 技术文章 > background样式

zhaodz 2019-09-21 15:28 原文

1.background-size

(1)可以指定数值,图片可能会失真

background-size:100px 100px ;  

(2)可以指定百分比

background-size:100% 100% ;  

(3)指定contain,包含 ,等比例缩放,图片是完整的,可能会留白

background-size:contain ;  

(4)指定cover,覆盖,等比例缩放,可能图片不完整

background-size:cover ;  

2.background-position

background-position:center center;

3.background-clip 背景裁切,可以设置背景的显示范围

(1)background-clip:border-box;(默认值) 显示范围:border+padding+content

(2)background-clip:padding-box;显示范围:padding+content

(3)background-clip:content-box;显示范围:content

4.background-origin 背景显示的原点

(1)background-originp:border-box;

(2)background-origin:padding-box;(默认值) 

(3)background-origin:content-box;

5.background-image,背景图片

(1)background-image:url('./image/图片.png')

(2)background-image:linear-gradient(方向,颜色 范围,颜色 范围……)  

方向:to right , to left,to top,to bottom,角度deg

范围:支持数值和百分比 ,

background-image:linear-gradient(to right,red 30%,yellow 50%,blue 70%)  

(3)background-image:radial-gradient(半径 at 圆心位置,颜色 范围,颜色 范围……)  

圆的大小,半径,

圆心的位置,right left top botton center,

background-image:radial-gradient(100px at center center,red 30%,yellow 50%,blue 70%)  

6.background-color: #fff;

7.background-repeat   背景平铺

(1)background-repeat :repeat -x;

(2)background-repeat :repeat -y;

(3)background-repeat :no-repeat ;

推荐阅读