Css3:background-clip,background-origin and Border-image tutorials in layman's

Source: Internet
Author: User
Tags repetition

Note: Author hh54188, transferred from http://www.cnblogs.com/hh54188/archive/2011/01/12/1929061.html

there is a " Background-clip and Background-origin" from Yiwen's blog , but a few years ago, some of the content has not been applied to the current standard.

A From the traditional multi-image background technology

Before the CSS3, 2.0 or 2.1. Adding fillets or shadows to a block-level element, or a more complex background image (such as polygons, multi-grain), can be quite a difficult thing to do. Here is a list of two examples of how to organize complex backgrounds and shading effects. On the one hand is to take care of some of the Web friends, on the other hand, and the latter two techniques to make a contrast, to do a connecting role. A skilled friend can skip this section and start reading directly from the next section

1. Please look at such an effect first: Pay attention to the text background, you have no idea how to achieve? One of the most common ideas is that I use Photoshop to make a complete picture of the left and right semicircle, as long as I need the text. But the question is, what should I do if I need to change the length of my text to become longer or shorter? In order to achieve this effect, we usually only need three graphs: and and . Specific principle:

We inserted three div:div#left,div#center,div#right in the original Div that was used to store the text. Where #left and #right are used to store a semicircle of the left and right edge and fixed width, and the middle of the #center used to store text, the background with repeat-x positioning, and do not locate the width, and then through other CSS settings so that it can shrink to the content area (contents), so that it can With the length of the text and freely telescopic. Finally, let #lef, #center, #right实现无缝隙的拼接 with the position or display property, and let the outermost div#content shrink to the three div it wraps, and then--it's done.

The key to this technology is how to allow the Div#center of the text to be stretched to the outside of the entire div#content, and maintain the #left, #center和 #right layout is not destroyed ... This completes the auto-scaling function. The streamlined code is as follows:

<div class= "Content" style= "height:32px;" >/* This is telescopic */
<div class= "left" style "width:15px; height:32px; " ></div>
<div class= "center" style= "HEIGHT:32PX;" > here to store text content </div>/* This is also scalable */
<div class= "Right" style= "width:15px; height:32px; " ></div>
</div>

But as to how to make the outermost inside of the container contraction close to the internal Div, so that div#center automatic scaling, we can Baidu, can also refer to the "Deep Understanding Box Box model."

Example 2. Let's look at the shadow effect of a jquery plugin FancyBox:

This is a plugin that mimics the effects of MacOS, and because the whole picture is too large, I just intercepted a corner. It is important to note that the shadow effect of the outer edge of the white border (which may not be obvious)--with the example above, how do you think the shadow effect is implemented?

Yes, or nine boxes, one box is the middle of the picture, the other eight boxes are installed East, west, south, north, southeast, southwest, northeast, West Eight direction of the shadow. This does not need to draw, we should be able to imagine it. But this example is different-this time there are nine boxes, if the same as the previous example, in a capacity to put nine boxes, and then by floating, positioning properties, and so on to achieve their seamless stitching, it will be quite tedious. Because it is necessary to consider the box around each box in its own scaling can also be appropriate to make some adjustments, not to appear dislocation and cracks. So the practice is to put the shadow of the eight boxes with absolute positioning fixed in the middle of the box in the eight directions, so the center box as the center, no matter how it zooms or shrinks, around the eight boxes are attached to it, no longer have to consider the box around you have dislocation and other problems. The legend is as follows:

Look at the actual positioning is not such positioning, look at from the Firebug:

Then look at one of the fancybox-bg-n specific css:

Iii.introduction of Background-clip,background-origin

When you're done reading this section, you'll start learning how to get rid of the old, tedious steps with a new technology with three attributes to make it less complex.

Before you start, make a few notes, see:

First, we'll introduce several concepts: content edge, Edge margin (padding edge), Border edge (border edge), margin edge. In order to understand, we can consider the inner margin, the border, the outer margin as a ring of the container, and each annular container has only two sides, a punch inside, a flush outside (inside and outside is also relative, as outside the outer margin is the inner edge of the border), so we will flush (outer) that Edge called this ring edge ( Edge). Of course, because the content area is "solid", there is no internal or external problem.

Origin's translation comes at the original meaning. As the name implies, so Background-origin is used to determine the original starting position of the image. It has three optional values Content-box,padding-box,border-box (Background-origin if written in CSS only the opera browser can recognize, if you want to use in Firefox or Chrome or Safari, To use their browser's private properties-moz-background-origin (Firefox),-webkit-background-origin (Chrome,safari), and the corresponding value is content,padding, Border, omitted-box), that is, you can choose whether the background image starts from the content area, whether it is an inner margin or a border.

For example, we have a div, the key is to locate its background image, in order to make the presentation more obvious, we let it start from the top left corner, Position:left top and No-repeat. And the content area is the same size as the picture, and the border and padding are set to 30 pixels wide. Ok

Before you join Background-origin, the code is:

. border
{
Background:url ("images/qwqw_s.jpg");
Background-repeat:no-repeat;
Background-position:left top;

border-width:30px;
border-style:dashed;
border-color:red;

width:180px;
height:254px;
padding:30px;
margin:0 Auto;
}

After setting the Background-origin:

Because it is done under the test in Firefox, so-moz-background-origin instead of Background-origin, the corresponding attribute so also removed the-box

The effect and effect is clear: we see that when the value of Background-origin is Content-box, first the upper left corner of the background picture is aligned with the upper-left corner of the content edge, and when Padding-box, the upper-left corner of the background picture is aligned with the upper-left corner of the inner margin. And so on The value of the visible background-origin really determines which area the background picture begins to display from. But then again, if I don't set any of the Background-origin properties, where is the default starting position? This is not a demonstration, but it is necessary to remember--padding.

It is important to note that this property is not valid if the background is not no-repeat. It is important that it is displayed starting from the Border-box area.

The Background-origin property is described here first. It should not be difficult. The following continues the introduction of Background-clip. These two attributes are not divided into two sections, because the experience tells me that these two properties should be paired to complement each other.

Clip is intended for clipping, interception. As the name implies, Background-origin's role is to tailor the background image to fit the needs. Of course, this is not the real meaning of the picture to be cropped, but based on the value of the property. Make proper concealment of certain parts of the picture. Background-clip and origin can be selected as well as content-box,padding-box,border-box (note that in Firefox and Chrome and Safari, you need to use private attributes, plus-mox-and- webkit-, here will not repeat, refer to the explanation of Background-clip content). How to cut a method. Depending on the part of the box you set, the image will not be visible outside the outside edge of the area. For example, the image starting position is the same as the example above, for example, starting from Border-box, but I background-clip set the value is Content-box, outside the content, that is, Border-box, The contents of the picture inside the Padding-box are not visible. Even though you're letting the picture start showing from the border.

Examples are as follows

. border
{
Background:url ("images/qwqw_s.jpg") black;
Background-repeat:no-repeat;
Background-position:left top;

border-width:30px;
border-style:dashed;
border-color:red;

Background-clip:content-box;
Background-origin:border-box;

-moz-background-clip:content;
-moz-background-origin:border;

-webkit-background-clip:content;
-webkit-background-origin:border;

width:180px;
height:254px;
padding:30px;
margin:0 Auto;
}

As mentioned above, we can see that although the picture is positioned from the top-left corner of the bounding rectangle, the properties of the clipping property background-clip are set to Content-box, so only the content of the contents area is visible, That is, as long as the contents of the image outside the content is hidden away.

The reason I have to test in different browsers ( firefox/3.6.3,Google:7.0.517.24, opera/9.80,Safari:5.0.1), the answer is also on the map, We see that the results in Firefox are different from the results of other browsers. Obviously Background-clip set the property is Content-box, but no picture of any part is blocked. What I want to say is that the -moz-background-clip property in Firefox is not a content value (but padding and border are still there), which can be seen in Firebug,- The value of Moz-background-clip is directly border, and when you forcibly change to content, this property disappears directly from the bug. This is, of course, the result of the 3.6.3 release, as to how it behaves in version 4.0 (though only beta). Self-testing possible

Four Actual combat

  After learning basic background-clip and Background-origin usage and principles, we will deepen our learning by manipulating a practical example:

                  

The rounded background is made up of three parts: And and (er, actually, it's from the Webqq2.0 Web site, which is the top tool bar ...). But as a teaching, it should be harmless ...), the idea and the opening of the black background of the production process is the same, fixed around, the middle of the narrow repeat-x. But this will not have to insert three Div, but also set float, but also set the display to consider the layout of the trouble.

Step One:

First build a frame out and give a layout. Don't worry about inserting the picture in. Here's a few things to note: Because you just need to insert the background around the left and right side of the box, and exactly what width you want to insert in the picture (if it's not exactly that wide?). So it will not succeed, because there is no attribute in CSS3 to control the position of the picture in the frame, do you think there is a background-position attribute? Note that it is the position of the control picture in the whole box. Or do not believe that you can try it yourself); There is also the value of padding can not be set, is to try to keep in line with the above example, to facilitate the comparison study margin is also to let the box center, you can ignore Finally, Border-style and Border-color are also easy to understand the layout to add up.

. border
{
Background:black;

border-width:0 11px; /* In order to adapt to the width of the left and right two pictures, and only around the need, up and down the width does not need */
border-style:dashed;
border-color:red;


width:180px;
height:90px; /* Because you want to adapt to the picture, so width change a little * *
padding:30px; /* In fact, padding is also not necessary, in order to facilitate the explanation of some problems, or keep * *

margin:0 Auto;
}

Step Two:

This step is simple, is to add the image of the middle need to repeat the x-axis, and to remove the black background

. border
{
Background:url ("Images/tool-bar/bg_b_c.png");/* Add background */
Background-repeat:repeat-x;
Background-position:center;

border-width:0 11px; /* In order to adapt to the width of the left and right two pictures, and only around the need, up and down the width does not need */
border-style:dashed;
border-color:red;


width:180px;
height:90px; /* Because you want to adapt to the picture, so width change a little * *
padding:30px; /* In fact, padding is also not necessary, in order to facilitate the explanation of some problems, or keep * *

margin:0 Auto;
}

Step Three:

This step is also very simple, is to remove the left and right ends of the background of the middle repetition, in order to facilitate our next step in the left and the border to insert the desired picture. Watch this.

The content property of-moz-background-origin is not valid, in fact the value here is padding. As I said at the end of the previous section, there is no content attribute in Firefox. If a friend wants to copy this code, remember to make the corresponding changes according to the browser version, change the value content of origin to padding, or remove the padding of the box.

. border
{
Background:url ("Images/tool-bar/bg_b_c.png");
Background-repeat:repeat-x;
Background-position:center;

-moz-background-clip:padding;
-moz-background-origin:content; /*firefox Background-origin has no content this property, in fact, the value is now padding. Valid in other browsers */

border-width:0 11px; /* In order to adapt to the width of the left and right two pictures, and only around the need, up and down the width does not need */
border-style:dashed;
border-color:red;


width:180px;
height:90px; /* Because you want to adapt to the picture, so width change a little * *
padding:30px; /* In fact, padding is also not necessary, in order to facilitate the explanation of some problems, or keep * *

margin:0 Auto;
}

Step Four:

This step is still very simple, insert the border of the left and right two pictures, and set the Position,repeat,clip equivalent. Note When multiple pictures are present, format the values, separated by commas.

. border
{
Background:url ("Images/tool-bar/bg_b_c.png"),
URL ("Images/tool-bar/bg_b_l.png"),
URL ("Images/tool-bar/bg_b_r.png");
Background-repeat:repeat-x,no-repeat,no-repeat;
Background-position:center,left Center, right center;

-moz-background-clip:padding,border,border;
-moz-background-origin:content,border,border;

border-width:0 11px; /* In order to adapt to the width of the left and right two pictures, and only around the need, up and down the width does not need */
border-style:dashed;
border-color:red;

width:180px;
height:90px; /* Because you want to adapt to the picture, so width change a little * *
padding:30px; /* In fact, padding is also not necessary, in order to facilitate the explanation of some problems, or keep * *

margin:0 Auto;
}

Important Tips! write this step and you can see that it's almost done. Remove the red border from the left and right-then change the border-color to none or directly remove the sentence. No, I can't. If you do not set the color, the border will become black, because the border has a style, and the style is also 11px wide ah, so it will be filled with the default black. Now you may feel that it is the border style border-style problem, so let's remove the style, the width of the reservation? Also not, because if no style width is invalid, the result will be as follows (we can see from firebug that the width of the border is 0, although still retains border-width). So border-style,border-color,border-width indispensable! Pay attention to this point!

Step Five:

In summary, you may feel that can not change border-style and can not change border-color is not lost? The correct answer is-or modify the Border-color, don't forget, color also has a value transparent, transparent. The color also makes it in, but as long as people can't see it. We implement it:

. button
{
Background:url ("Images/fancybox/fancy_title_main.png"),
URL ("Images/fancybox/fancy_title_left.png"),
URL ("Images/fancybox/fancy_title_right.png");
Background-repeat:repeat-x,no-repeat,no-repeat;
Background-position:center,left,right;

Background-clip:padding-box,border-box,border-box;
Background-origin:padding-box,border-box,border-box;

-moz-background-clip:padding,border,border;
-moz-background-origin:content,border,border;

border-width:0 15px;
border-style:dashed;
Border-color:transparent;

width:80px;
height:32px;
}

OK, it's easy, isn't it?

Four Border-image

Writing here I found that the article's front line seems to pull a little longer. So I'm going to border-image here just as an add-on description, and won't delve into it as briefly as possible. Start (so the nonsense is also simple to choke some ...). ):

Border-image is a picture positioned on a border--that's not the same as setting the Background-origin property to border? Yes, that's the meaning of the story. But in the next notes and examples, you'll see where it's convenient.

This property is still tinkering with a picture. Take a direct look at the description picture first:

      

The left side of the sketch is an example of the image used by Border-image, and the sketch on the right is a box. Border-image has two values to set, the first one is the Cut attribute (Border-image-slice), up to four values can be set, the naming rules and margin, padding are consistent, in the order of the right bottom left. The four values correspond to the widths of the different areas of the left sketch, as well as the left-to-right order, which is the width of the 2,6,8,4 area (4, 6 is the horizontal length, and the 2,8 area is the clump length). It is known that because it is the intersection of the reason, as long as the definition of the width of the four blocks, 1, 3, 9, 7 area of the length of the width is also determined. On the map to the box model, from 1 to 9 (except 5) it is exactly the bounding area of the box, so that the box's border picture falls.

But there is one more question. If the actual picture is as small as the sketch on the left, and the actual box has the same size as the sketch on the right, then the 2, 6, 8, 4 area pictures may not be enough? Well asked, so Border-image also provides a mechanism to deal with this problem-the image repetition property (Border-image-repeat), also called the stretched value (stretch values). There are four values to choose from: Stretch (stretched and default), repeat (repeating), round (tiled). Does it sound familiar, right, and the location attribute of the computer wallpaper is the same. You can set up to two stretch properties, such as round round, for each border-image. The previous one is for the side of the picture (except for 5 areas), the latter one for the middle section, or 5 for the area. If there is only one value, then the area is assumed to be arranged according to this value. If this property is not set, the image is laid out by the default value stretch (stretch).

So, let's take another example and we'll be clear at a glance:

Back to the last section of the example, this time we only need two pictures: and

You can see that the figure behind that is the left and right side stitching together, this time we use the Border-image property to complete the same effect above, very simple, directly look at the CSS code:

. border
{
Background:url ("Images/tool-bar/bg_b_c.png");
Background-repeat:repeat-x;
Background-position:center;

-moz-background-clip:padding;
-moz-background-origin:padding;

-moz-border-image:url ("Images/bg_b_l_r.png") 0 11;

border-width:0 11px; /* In order to adapt to the width of the left and right two pictures, and only around the need, up and down the width does not need */

width:180px;
height:90px; /* Because you want to adapt to the picture, so width change a little * *
padding:0 30px; /* In fact, padding is also not necessary, in order to facilitate the explanation of some problems, or keep * *

margin:0 Auto;
}

Still have to do a few notes. Because in this case we only need to have the left and right side of the picture, so the cutting property as long as the picture cutting left and right can be: 0 11. In the last step of the previous section of the important note, I repeatedly stressed that border-style,border-color,border-width is indispensable. But it's enough to just need a border-width here! This is where it's convenient. But when using, remember the differences between different browsers and decide whether to use-moz-or-webkit-or-o-prefixes.

Let's show you some amazing examples:

----->

There are also small:------->

Five. Just a few more words .

Once I met a lot of front-end problems can only Google foreign articles, or to stack overflow (but really very effective, quick response, brainstorming, and sentence Zi Shan Baht, to everyone strongly recommended).

Css3:background-clip,background-origin and Border-image tutorials in layman's

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.