CSS3关于背景图片应用的总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuelian3015/article/details/86677583

背景的 基本属性

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;

猜你喜欢

转载自blog.csdn.net/xuelian3015/article/details/86677583
今日推荐