背景的 基本属性
background-color(背景颜色)
background-image(背景图片)
background-repeat(背景图片展示的方式)
background-attachment(背景图片滚动还是固定)
background-position(背景图片定位)
简写为:
background: background-color background-image background-repeat background-attachment background-position
1、background-color属性
语法:
background-color:transparent || color
默认是transparent,不设置颜色情况下是透明无色。color可以取颜色名、rgb颜色、hls值、十六进制颜色值、rgba颜色、hsla颜色值。
2、background-image属性
语法:
background-image:none || <url>
默认是none,<url>是图片路径
3、background-repeat属性
语法:
background-repeat:repeat || repeat-x || repeat-y || no-repeat
4、background-attachment属性
语法:
background-attachment:scroll || fixed
该属性取值为“fixed”时,一般运用在HTML或body标签上,其他标签达不到固定的效果
5、background-position属性,用来设置背景图片的位置,默认值为(0,0)||(0%,0%)||(left,top)
CSS3中新增的属性:
background-origin:绘制背景图片的起点。用来决定background-position属性的参考原点,决定背景图片的定位起点,默认情况下background-position以元素的左上角为起点。
语法:
background-origin:padding-box || border-box || content-box
padding-box(padding):默认值,决定background-position起始位置的padding的外边缘(border的内边缘)开始显示背景图片。
border-box(border):决定了background-position起始位置从border的外边缘开始显示背景图片。
content-box(content):决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片。
background-clip:指定背景图片的显示范围,就是背景裁切属性,
语法:
background-clip:border-box || padding-box || content-box
border-box:默认值,元素背景图像从元素的border区域向外裁剪,元素边框之外的背景图片被裁剪掉。
padding-box:元素背景图像从padding区域向外裁剪,元素padding区域之外的背景图片都被裁剪掉。
content-box:元素背景图像从content区域向外裁剪,元素内容区域之外的背景图片被裁剪掉。
background-break:指定内联元素的背景图片进行平铺的循环方式。有三个属性值:
bounding-box:背景图像在整个内联元素中进行平铺
each-box: 背景图像在行内进行平铺
continuous:下一行背景图像紧接着上一行背景图像进行平铺。
background-size:指定背景图片的尺寸大小。
语法:
background-size:auto || <length> || <perentage> || cover || contain
auto :默认值,保持背景图片的原始高度和宽度。
< length >:取具体的整数(px),改变图片的大小。
< perentage >:取百分值,百分值是相对于元素的宽度来进行计算。
cover:把图片放大,铺满整个容器。(可能导致图片失真)
contain:保持图片的本身宽高比例,把背景图片缩放到宽度或者高度正好的背景容器里面。
在CSS3中可以设置多背景图像,语法:
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
background-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;