CSS3背景探讨

来源：互联网发布：瓦拉内fifa数据编辑：程序博客网时间：2024/04/30 13:17

CSS2.1中背景的基本属性

background-color

值为：transparent和
如果为transparent意味着不设置什么颜色情况下是透明的。为的话，可以用16进制表达或者用rgba方式表达或者用hls方式表达。

background-image

默认为none，可以指明一个url，且这个url可以为绝对地址或者相对地址。

background-repeat

值为repeat或者repeat-x或者repeat-y，或者no-repeat.
其实，这个属性与接下来介绍的css3中这三个属性有直接的关联关系。所以为了能够更好的表达background-repeat是如何对背景图片绘制的，将再介绍完css3中几个属性之后再进一步详细的介绍该属性。

background-attachment

值可以为scroll和fixed，默认为scroll当除了html或者body元素之外的元素应用fixed的时候不起作用。

background-position

值可以为百分数，长度值，或者[left|center|right] [top|center|bottom]
其中百分数和长度值可以为负数，百分数相对于应用背景的元素的宽度或者高度。这个属性可以这么理解，在元素上有一个二维坐标，默认的情况下坐标原点位于边框的左上方，根据两个不同的值分别找准对应的x轴y轴的位置，然后确定图片渲染的位置。如下图所示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div {            width: 100px;            height: 100px;            padding: 10px;            border: 20px solid rgba(255,255,0,0.5);            background: url('images/favicon.ico') no-repeat 20% 30%;        }    </style></head><body>    <div></div></body></html>

这里写图片描述

所以可以看出，background-position只是定义了背景图片相对于原点垂直或者水平偏移量是多少。
那么问题来了，上述情况是默认情况下，在边框的左上角，那么尊杨改变这个原点的位置呢？也就是说怎样移动二维坐标的原点呢？答案是要使用background-origin 。

CSS3中背景的基本属性

background-origin 确定起点

是什么？
background-origin 是用来决定background-position属性的参考原点的，即决定背景图片的定位的起点。换句话说，background-origin 决定了上述二维参考系原点的位置。该位置只能有三种，如下定义的表述。
如何定义？
1。Padding-box：默认值，原点为的位置位于padding的外边缘如下图所示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div {            width: 100px;            height: 100px;            padding: 10px;            border: 20px solid rgba(255,255,0,0.5);            background: url('images/favicon.ico') no-repeat 0 0;        }    </style></head><body>    <div></div></body></html>

这里写图片描述
由于padding-box为默认值，所以也就说明了上述在background-position默认的情况下坐标原点位于边框的左上方了。

2。Border-box:原点位置border的外边缘开始。
这里写图片描述

3。content-box原点位置content的外边缘开始。
这里写图片描述

值得注意的是：当background-attachment为fixed的时候该属性会无效

兼容性问题？
这里写图片描述

同时还存在的问题是虽然现代浏览器都支持，但是不同内核浏览器其需要自己的前缀比如 Mozilla Gecho内核的要有-moz-前缀等。

还要值得注意的是，对于老的以Mozilla Gecho和webkit浏览器该属性的值并不是padding-box，border-box，content-box，而是padding，border，content。

所以最终兼容性解决方案是：

/*老版本的webkit和Mozilla Gecko*/                -webkit-background-origin: border|| padding||content;            -moz-background-origin: border|| padding||content;            /*新版本的webkit和Mozilla Gecko*/            -webkit-background-origin: border-box|| padding-box||content-box;            -moz-background-origin: border-box|| padding-box||content-box;            /*Presto内核的浏览器*/            -o-background-origin: border-box|| padding-box||content-box;            /*标准IE内核浏览器兼容*/            -ms-background-origin: border-box|| padding-box||content-box;            /*W3C标准*/            background-origin: border-box|| padding-box||content-box;

background-clip 显示范围

是什么？
以上通过background-origin和background-position定义了背景图片的位置，但是有可能背景图片太大以至于超出了我想要的范围，比如不想让图片超出content区域或者padding区域，那么就可以使用background-clip属性。
如何定义？
1。border-box。默认值，超出边框外边界的背景图片将会减掉不显示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div {            width: 100px;            height: 100px;            padding: 10px;            border: 20px solid rgba(255,255,0,0.5);            background: url('images/5.jpg') no-repeat 0 0;            background-origin: border-box;/*注意这里设计了原点为border-box了*/            background-clip: border-box;        }    </style></head><body>    <div></div></body></html>

这里写图片描述

2.padding-box，元素背景图片从padding外边界开始裁剪。
这里写图片描述
3。content-box，元素背景图片从content边界开始裁剪。

注意的是，这个属性会将整个背景进行裁剪，包括背景颜色和背景图片
兼容性问题？
这里写图片描述

和background-origin一样也是虽然标准浏览器都支持，但是不同的内核支持凡是不同，所以要加前缀。

background-size 指定大小

是什么？
上述几个属性仅仅是把背景图片定位好了，但是如何显示却没有说明，那么该属性就是介绍图片是如何显示，包括对图片设置大小等显示方式。
如何定义？
1。auto默认值。将保持背景图片的原始高度和宽度。
2。长度和百分数会对图片的大小发生改变，这种改变方式和css2.1中img的布局方式一样，如果只有一个值，就是制定了宽度，那么高度根据图片的比例进行相应的变化。百分数相对于元素的宽度。所以在流体布局或者响应式布局中，可以让背景自适应容器的大小。
3。cover。将图片放大，以适合铺满这个容器。为了让图片能够看起居中显示，还必须将background-position设置为center。
4。contain。让图片保持自身的宽高比例，将图片缩放到宽或者高度正好适应所定义的背景的区域，所以图片可能在元素中水平或者垂直居中。
注意：以上这几种方式除了auto为其他方式都多图片或多或少的失真
兼容性问题？
这里写图片描述
和background-origin一样也是虽然标准浏览器都支持，但是不同的内核支持凡是不同，所以要加前缀。

再说background-repeat

现在再说background-repeat可能好理解点。通过background-origin和background-position对图片进行定位后，根据background-size绘制好大小后，根据background-repeat属性的值开始相对于这个图片进行向上向下或者向左向右的复制平铺。这种平铺受限于background-clip。

同时CSS3只能怪还支持多背景，这里就不在赘述了。

0 0