细说background

CSS背景属性

基本属性

background-color

: 默认值为

transparent

,可以以”颜色名”、”rgb(css3新增rgba)”、”hls(css3中新增hlsa)”、”十六进制”的方式设置颜色值

background-image

: none(默认) || url()

background-repeat

: repeat(默认) || repeat-x || repeat-y || no-repeat

background-attachment

: scroll(默认) || fixed

注意:

background-attachment

取值为

fixed

时,需要运用在html或body标签上。使用在其他标签上没有固定效果。

background-position

:水平位置 垂直位置

说明:一般来说,背景图片的左上角是和元素的左上角对齐的,background-position这一属性可以改变背景图片与元素的对齐点。

先来看看水平位移和垂直位移单位都是px的时候



<span class="hljs-attribute">background-position</span>: <span class="hljs-string">30px 50px</span>

以元素左上角为坐标原点,水平向右延展方向为x轴正轴,垂直向下延展方向为y轴正轴。那么此时图片的左上角与元素的(30,50)坐标点对齐。

现在来看百分比的情况:
计算方式为:
水平偏移x:(元素宽度-图片宽度)*百分比
垂直偏移y:(元素高度-图片高度)*百分比

此时同样的,图片左上角跟计算出的元素的(x,y)坐标点对齐。

当然啦。实际做项目的时候我们不会这么麻烦的去计算,这里只是总结一下它的计算方式。
实际项目中只需要记住:

1、背景图片水平垂直居中:



<span class="hljs-attribute">background-position</span>: <span class="hljs-string">center</span>

2、雪碧图情况:
原理跟使用px的情况相似,这里不赘述了。可以去看看这篇文章:Click here

css3新增属性



<span class="hljs-attribute">background-origin</span>: <span class="hljs-string">指定绘制背景图片的起点</span>
<span class="hljs-attribute">background-clip</span>: <span class="hljs-string">指定背景图片的显示范围</span>
<span class="hljs-attribute">background-size</span>: <span class="hljs-string">指定背景图片的尺寸大小(很常用)</span>
<span class="hljs-attribute">background-break</span>: <span class="hljs-string">指定内联元素的背景图片进行平铺时的循环方式</span>

CSS3 background-origin

该属性主要用来决定背景图片与元素对其原点的参考点。默认是以元素左上角为坐标原点进行对其,这一属性可以打破这一格局。

background-origin

有三个属性:

padding-box

:默认值。表明图片的原点和元素padding外边缘(border的内边缘)进行对齐。

border-box

:表明图片的原点和元素border的外边缘进行对齐。

content-box

:表明图片的原点和元素content外边缘(padding的内边缘)进行对齐。

浏览器兼容性:
现代浏览器都支持和ie9+。但是使用时还需要加上浏览器前缀。
如下:



/*old Webkit and Gecko*/
<span class="hljs-deletion">-moz-background-origin: padding || border|| content;</span>
<span class="hljs-deletion">-webkit-background-origin: padding || border|| content;</span>
/*new Webkit and Gecko*/
<span class="hljs-deletion">-moz-background-origin: padding-box || border-box || content-box;</span>
<span class="hljs-deletion">-webkit-background-origin: padding-box || border-box || content-box;</span>
background-origin: padding-box || border-box || content-box; /*w3c标准*/

例子:
1、padding-box

2、border-box

3、content-box

CSS3 background-clip

该属性用来定义背景图片的裁剪区域。这样说得会比较抽象,稍后会通过实例为大家说明。

属性:



<span class="hljs-attribute">border-box</span>: <span class="hljs-string">背景图片在边框下(边框外边缘,不会超出边框),默认值</span>
<span class="hljs-attribute">padding-box</span>: <span class="hljs-string">背景延伸到padding的外边缘,但不会超出边框范围(默认)</span>
<span class="hljs-attribute">content-box</span>: <span class="hljs-string">背景仅在内容区描绘,不会超过padding和边框范围</span>

是不是觉得似曾相识呢?没错,就是

background-origin

刚刚提到的三个属性。

浏览器兼容性:

  • 在Gecko内核浏览器(FF3.6-)不支持content-box,并且使用border和padding来代替标准语法中的border-box和padding-box
  • safari5能够在标准属性中支持border-box和padding-box,但content-box属性值也需要加上-webkit-前缀

我们先来看看默认情况下如果背景图片超出了元素的范围,元素会对背景图片进行怎样的裁剪。
测试图片200宽200高。

  • repeat:
    /代码:/
    .box {

    
    
    
       width: 260px;height: 150px;
       border: 10px dashed lightgreen;
       background-color:slateblue;
       background-image: url(img/test.jpg);
       background-repeat: repeat;

    }
    效果:

  • no-repeat:
    /代码:/
    .box {

    
    
    
      <span class="hljs-attribute">background-repeat</span>: <span class="hljs-string">repeat; </span>

    }

效果:

默认情况下:

背景平铺时会填满整个元素,包括border的范围。此时

border-color

完全在

background-image

下,而且

background-image

元素边框左上角起到元素边框右下角止。但

background-position

的起始点却是从元素的内部补白(padding)外边缘开始。

背景不平铺时border-color从元素边框左上角起到元素边框的右下角边缘止,

background-image

从内容补白(padding)外边缘的左上角起到元素边框的右下角止。

现在使用

background-clip

属性可以改变背景图片的填充范围。

  • 默认情况下,
    background-clip

    border-box

  • background-clip

    padding-box

    时:背景图片的填充范围为,元素padding外边缘左上角元素padding外边缘右下角。注意此时背景颜色的填充范围也会改变。

平铺时:

不平铺:

  • background-clip

    content-box

    时:背景图片的填充范围为,元素padding内边缘左上角元素padding内边缘右下角。注意此时背景颜色的填充范围也会改变。

平铺时:

不平铺:

CSS3 background-size

现在来看一个用得相对比较多的属性。

background-size

属性可以用来指定背景图片的尺寸,可以控制背景图片在水平和垂直两个方向上的缩放,也可以控制图片拉伸覆盖背景区域的方式。背景图片能够自适应元素盒子的大小。

属性:



<span class="hljs-attribute">background-size</span>: <span class="hljs-string">auto || &lt;length&gt; || &lt;percentage&gt; || cover || contain</span>
  • auto: 默认值。将保持背景的原始高度和宽度。
  • <length>: 取具体的整体值(如px),将以设定的宽高值对背景图片进行缩放。
  • <pencentage>: 取值为百分值,可以是0% ~
    100%。注意这个值是对于元素的宽度进行计算的,计算出来的宽高值再作为背景图片的宽高值对背景图片进行缩放。
  • cover: 将背景图片宽度或者高度放大,以使图片宽高能适应铺满容器宽高较大的一方,但不同于
    background-cover:100% 100%

    的方式。

1、宽度为100,高度为250


2、宽度为250,高度为100

3、宽度为80,高度为100

  • contain:保持背景图像本身的宽高比例,将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。

  • 当background-size只取一个值时,另一个值自动设为auto。

浏览器兼容性:
ie9+以及其他主流。老版本浏览器需要加上前缀。

background-size的其他适用场合:

  • 在流体布局或者响应式布局中,确保背景图像能始终适配容器大小。
  • 对于平铺的重复性背景图像,确保背景图像不会有截断效果。
  • 解决Retina屏幕双倍像素下背景图像模糊问题。(将大图缩小一倍)
  • 使用链接或者列表元素的背景图像能和文本一起进行缩放。

其他新增CSS3背景属性

因为这两个属性浏览器兼容性比较差,项目中使用较少,所以这里不进行具体总结了。收集了一些相关的文章供有兴趣的小伙伴进行阅读。

1、内联元素背景图像平铺循环方式:暂无文章
2、CSS3多背景:Click here

From:segmentfault.com

Read:回味background

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注