背景设置

背景设置background:

1.background-color:背景颜色设置

   颜色单位:英语单词(如:red,green,blue,white,...)、十六进制、rgb() / rgba()、hsl() / hsla()、transparent;

2.background-image:url("图片地址");背景图片设置

3.background-repeat:repeat-x | repeat-y | no-repeat;背景平铺设置

   repeat-x:横向平铺

   repeat-y:纵向漂流

   no-repeat:不平铺

4.background-position:x y;背景定位设置

   可以设置像素(支持正负数),可以设置方向和百分比(left=0%,center=50%,right=100%)

   例如:background-position:20px 40px; X轴方向上向右偏移20px,Y轴方向上向下偏移40px;

   background-position:center center;居中显示(可以简写为:background-position:center;)

5.background-size:背景图片尺寸设置

   background-size:width height | cover | contain;

   cover:自适应宽高中较大尺寸铺满

   contain:自适应宽高中较小尺寸

6.多背景,多个属性用逗号隔开

   如:background-color:red;

   background-image:url("https://photo.tuchong.com/395783/g/20329210.jpg"),url("http://tse1.mm.bing.net/th?id=OIP.IbYQdbyj5ZaYJvDLgS4oYAEYEY&w=300&h=300&p=0&pid=1.7");

   background-repeat: repeat-x, no-repeat;

   background-position:0 0,100% 0;

   background-size: width height, | contain;

7.背景简写形式,没有固定顺序

   background:background-red background-image background-repeat background-position;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容