Home >Web Front-end >HTML Tutorial >css3 background_html/css_WEB-ITnose
css3 background_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:141147browse
Background is a very important CSS attribute, and a lot of new content has been added in CSS3. On the one hand, new attribute values have been added to the original attributes, and on the other hand, 3 new attributes have been added.
1. Introduction to new attribute values in css3The background of css2 has 5 attributes, the abbreviations are as follows:
background:background-color,background-image,background-repeat ,background-attachment, background-position;
Among them, background-image, background-repeat and background-position has added new attribute values in css3.
1. background-image
Background-image in css3 can set multiple background images, usage: background-image: url(), url().
For multiple background images, you need to pay attention to the following points:
a. Background image order
Background images are displayed in the form of layers, and multiple background images are distributed from top to bottom , the first background image is at the top level, so when adding multiple background images, you need to pay attention to the order and image transparency.
Example:
The background images of the two divs are the same, in reverse order.
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; background-repeat: no-repeat; display: inline-block;}.bg{ background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);}.bg2{ background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg"></div><div class="bg2"></div></body>
Analysis: Because the background image is displayed in the form of layers, the first one added is on the top layer. So in the picture on the left, the first background image is on top and is transparent, which can produce a beautiful overlapping effect. The second one, because the opaque background image is on top, covers the second image, so the image below cannot be seen.
This is very similar to box-shadow. When a box has multiple shadows, the multiple shadows are distributed from top to bottom, with the first shadow at the top. For more information, please refer to "css3 box-shadow"
b. Syntax abbreviation
Use ', ' to separate the abbreviation value of each group of background; if there is a size value , need to be followed by position and separated by "/";
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin]<strong>,</strong>...
Note: When abbreviating, the background-color must be set at the bottom to take effect. If background-color is added to other layers, the entire rule for syntax errors is ignored and will not be displayed.
Example:
<style>div{ width: 200px; height: 200px; border: 5px dotted pink; display: inline-block;}.bg3{ background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;}.bg4{ background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img src="img/bg_flower_2.gif" /><div class="bg3"></div><div class="bg42"></div></body> Analysis: The left one in the picture above, background-color is written at the bottom, Take effect. In the second center from the left, a background-color: yellow is added to the first layer; the entire rule is invalid.
c. Split writing
or split the abbreviation: if there are multiple background images and only one other attribute (for example, there is only one background-repeat), it indicates all background images Apply this attribute value; similarly, only one background-color can be set.
background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-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 : <strong>color</strong>;
d, background image and gradient
The gradient usage is like this: background-image:linear-gradient(...); It can be seen that the gradient is the background image A special case of using code to generate a background image. To learn more about gradients, please refer to "css3 Gradient Background"
Since gradients are also background images, they can of course be used when there are multiple backgrounds.
.bg5{ background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;}<div class="bg5"></div> Generally speaking, the multiple background images added in CSS3, if you choose good images and use them properly, can be surprising and achieve unexpected effects.
2. background-repeat
corresponds to the tiling of the background image. One point must be explained: by default, the background image is tiled on the x-axis and y-axis, although it starts from the upper left of the padding-box corners, but are tiled outward in all directions, extending into the border area. This is very important, and will also be mentioned below in the context of background-origin.
a, css3 increases to 2 attribute values
In css3, you can use two repeats instead of one value. The first is the x-axis and the second is the y-axis. For example, background-repeat: repeat no-repeat; is equivalent to background-repeat: repeat-x;.
The only way to repeat the background image in CSS2 is repeat. The repeat effect is like tiling tiles. If the entire number cannot be placed neatly, the excess part will be cropped. CSS3 adds new space and round attribute values, which can better control the repetitive process based on repeat and make it perfect.
b. The new CSS3 attribute value space
will tile the background image horizontally and vertically without cropping. Align both ends, fill the gap in the middle, and keep the size of the background image unchanged.
c, css3 new attribute value round
Tile the background image horizontally and vertically without cropping. But the background image may be stretched or shortened.
Example of comparison between repeat, space and round:
I originally wanted to find a suitable smaller picture, but couldn’t find it, so I’ll use a background image in the resource link at the back of the article as an example.
The original author’s example is here.
This is the sheep. Original image information:
What a big sheep. I set the background-size when doing the demo: 100px 100px, this attribute will be introduced later.
Code:
<style>div{ width: 240px; height: 240px; border: 1px solid pink; display: inline-block; background-image: url(img/sheep.png); background-size: 100px 100px; background-color: green; color: red;}.repeat{ background-repeat: repeat;}.space{ background-repeat: space;}.round{ background-repeat: round;}.round1{ background-repeat: round; width:250px;}</style><body> <div class="repeat">repeat</div> <div class="space">space</div> <div class="round">round四舍</div> <div class="round1">round五入</div></body> Effect:
Analysis:
First, I set The size of div is 240px*24px, and the size of img is 100px*100px.
In the case of repeat, the background image is tiled from the upper left corner along the x-axis and y-axis. The size of the background image remains unchanged and the excess is cropped, as shown in the left 1 of the above picture.
In the case of space, 240/100=2.4 cannot hold 3 pictures. Because space is not cropped, it is rounded down to 2, so there are 2 background pictures on the x and y axes, and both ends Align, and leave the rest of the space blank, as shown in the left 2 in the picture above.
round的情况，round这个词很有意思，它有四舍五入的意思。round(240/100)=round(2.4)=2，所以就容纳2张图片，图片尺寸放大，如上图右2。
如果设定div宽度为250，round(250/100)=round(2.5)=3，所以就容纳3张图片，图片被缩小，如上图右1。
3、background-position
css2中背景只能从左上角定位，css3的background-position增加到四个属性值，可以对四个角都进行定位，而且可以取负值。
background-position取值的关键字有：top left center right bottom
按照取值个数举例来说一下：
a、一个参数
background-position: top;仅给定一个值，那么第二个值将是"center"。
注意一个问题：给一个值，并不一定是设置background-position-x,要根据参数定。left center right自然是设置x轴，top center right是对应y轴。
b、两个参数
background-position:x% y%|x pos y pos|center center。
第一个设置x轴偏移，第二个设置y轴偏移，没什么好说的。
c、三个参数
Note:设置3个或4个参数值时，偏移量前面必须有关键字。就是说形如："10px bottom 20px" ，是错误的，因为10px前面没有关键字。
MDN上background-position: 0px 0px, center;这样的写法显然是错误的。
background-position: right 10px top;设置，水平靠右10px，垂直top。
d、四个参数
background-position:right 10px bottom 10px;设置靠右下角水平垂直10px定位。
二、css3中新增属性介绍css3中background新增了3个属性:background-origin,background-clip和background-size。
1、background-origin
background-origin用来指定背景图片定位在哪个盒子中。
个人观点：background-origin是background-position的特例。都是表示背景图放哪，background-origin特殊点，决定背景图定位在哪个盒子中，相当于快速定位，你可以先通过background-origin定位到盒子，再通过background-position进行微调。
语法：
background-origin ： border-box | padding-box | content-box;
默认值：padding-box；
设置背景图片原始起点位置，没什么好说的，只是有几点需要注意：
a、repeat和origin关系
如果背景不是no-repeat，这个属性无效，它会从边框开始显示。这句话是慕课网总结的，我得吐槽一下，背景repeat这个属性是还是有效的。请看下面例子。
<style type="text/css">div{ color: white; width: 100px; height: 100px; border: 20px dotted pink; padding:50px; background-color: yellow; background-image: url(img/wl.jpg) ; display: inline-block; vertical-align: top;}.origin-content{ background-origin: content-box;}.nopeat{ background-repeat: no-repeat;}</style><body><div></div><div class="origin-content nopeat">origin-content nopeat</div><div class="origin-content">origin-content</div></body>
分析：可见设置repeat时，先通过origin确定图片位置，然后向各个方向朝外平铺，延伸到border区域。在上面background-repeat时就说了：对于背景图的平铺，默认情况，背景图在x轴和y轴平铺，尽管起始于padding-box左上角，但是其各个方向朝外平铺，延伸到border区域。现在origin只是改变了起始位置，
b、fixed和origin关系
如果background-attachment属性设置为"fixed"，background-origin将不起作用。
这个很好理解，因为fixed是相对于视口定位的，一个网页只有一个视口，如果不理解请看《background-attachment属性》
2、background-clip
背景区域中背景图片裁剪的位置。
语法：
background-clip ： border-box | padding-box | content-box | no-clip;
默认值：border-box。
如果理解比较抽象，就关注背景颜色，如果background-clip为content，背景颜色就不会填充padding和border，因为被裁剪掉了。
<style type="text/css">p { border: 10px navy; border-style: dotted double; margin: 1em; padding: 1em; background: #F8D575; } .bb{ background-clip: border-box; } .pb{ background-clip: padding-box; } .cb{ background-clip: content-box; }</style><body><p class="bb">内容background-clip: border-box;</p><p class="pb">内容background-clip: padding-box;</p><p class="cb">内容background-clip: content-box;</p></body> 3、background-size
css3新增了background-size允许背景图被拉伸或者压扁。在响应式设计里很有用。
语法：
background-size: auto | <长度值> | <百分比> | <strong>cover</strong> | <strong>contain</strong>
参数：
auto:默认值，不改变背景图片的原始高度和宽度。
d059fd61b64dafe822b895706790cc04：成对出现如200px 50px,将背景图片宽高依次设置为前面两个值；当设置一个值时，将其作为图片宽度值，高度被设置为"auto"，且高度等比缩放。
0cf9fadf93ed56ec91465bb2f6c16d1a：0%~100%之间的任意值，将背景图片宽高依次设置为所在元素宽高【并不是图片默认的宽高】乘以前面百分比得出的数值，一个值时，高度等比缩放。
cover:覆盖，将背景图片等比缩放以填满整个容器。类似桌面背景中的平铺。就是把图片按比例扩展至足够大，以使背景铺满盒子，如果图片和容器的长宽比不同的话，背景图像的某些部分可能无法显示出来。
contain:容纳，即将背景图片等比缩放至容器的宽或高被填充满。有可能把图像放大后，依然铺不满盒子。
网上很多cover和contain的例子，但是讲的很不明白。下面我举个例子说明一下。
对比cover和contain举例：
<style>div{ width: 150px; height: 60px; border: 1px solid pink; display: inline-block; background-image: url(img/bg.png); background-color: green; vertical-align: top; background-repeat: no-repeat;}.cover{ background-size: cover;}.contain{ background-size: contain;}</style><body><img src="img/bg.png">原始图片尺寸：100px*50px<br/><br/><div class="cover"></div>div尺寸：150px*60px; <div style="width:150px;height:75px;background-size:cover;"></div>cover对应图片尺寸：150px*75px;<br/><br/><div class="contain"></div>div尺寸：150px*60px; <div style="width:120px;height:60px;background-size:contain;"></div>contain对应图片尺寸：120px*60px;<h3>背景图片大小计算方法：</h3><h4>即cover和contain等比缩放比例的计算：</h4><p>150/100=1.5;60/50=1.2</p><p>cover取大，放大1.5倍。width:150px;height:75px;</p><p>contain取小，放大1.2倍。width:120px;height:60px;</p></body> 所以我个人觉得在使用cover和contain时把握住本质就是确定缩放比例，而不要去记忆那些复杂的规则。
三、资源链接background-clip
background-size
new repeating background image options in css3
how to resize background images with css3
w3c background shorthand