背景设置

2017-08-21  本文已影响0人  浅夏_cd06

背景设置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;

上一篇 下一篇

猜你喜欢

热点阅读