CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.
Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting.
Multiple Backgrounds
What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn't it? It is. No more having to have nested elements with lots of CSS just to create a layered effect. The syntax is very straightforward: just separate each background image with a comma.
background-image: url(…), url(…);
For browsers that don't recognize multiple backgrounds, the entire background declaration will be ignored. (Actually, according to PPK, Explorer Mac will show the last background declared.) Depending on your design, you may need a single image declared and then declare the multiple background on the next line.
background: url(…) 0 0 repeat 10px 100px, url(…) 5px 5px no-repeat 5px 5px #FFF;
background-image: url(…), url(…);
You can declare multiple backgrounds using the shorthand syntax, as well.
background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;
I threw a bunch of stuff in here to see if you're paying attention. The shorthand syntax for a normal background includes image, position, and repeat. However, the colour is always the last thing declared. (I've traditionally always declared it first.) There can only be one colour applied to an element—although with rgba, if you could declare the colour more than once, it'd theoretically be possible to mix colours.
Background Size
Another interesting property that is being implemented in recent browsers is support for background size. Any browser that supports multiple backgrounds also supports background size.
When declaring background size for multiple backgrounds, the declarations are separated by commas just like with background-image.
background-image: url(…), url(…);
background-size: 10px 100px, 5px 5px
In Opera, Mozilla, and Safari, you'll need to declare the vendor prefixes. Chrome and the Opera 10.5 dev builds don't require the vendor prefix. And to further clarify, background-size support is in Opera 10.1 but multiple background support isn't.
-o-background-size: 10px 100px;
-moz-background-size: 10px 100px, 5px 5px;
-webkit-background-size: 10px 100px, 5px 5px;
(As much as I love the features that browsers are implementing, I'm getting really annoyed at all the vendor prefixes. Seriously. And believe me, by the end of this article you'll see how much worse it can get.)
The background size declares width first and then height. Technically, you should be able to omit the second value, which should use auto for the second value.
background-size: 10px; /* should be the same as '10px auto' */
background-size: 100%; /* should be the same as '100% auto' */
The reality?
| Opera 10.5 |
Works according to the spec |
| Safari 4 |
ignores the declaration altogether |
| Firefox 3.6 |
Works according to the spec |
| Chrome 4 |
Treats the second value as the same as the first. Eg: 10px becomes '10px 10px' |
There are two other values that can be used for background-size: contain and cover. Cover will make sure that the background image covers the element. Contain makes sure that the entire background image is visible within the element. Only Safari seems to be the odd man out on this one.
If you declare multiple images using the shorthand syntax, the background size is always declared after the background position (since they could technically be confused with each other) and separated with a slash.
background: url(…) 0 0 / 10px 100px repeat, url(…) 5px 5px / 5px 5px no-repeat #FFF;
The only problem is that no browser supports this and the entire background declaration will be thrown out if you try and use this syntax. Well, except for Opera 10.5 which does a weird thing where it ignores just the parts of the declaration it doesn't understand.
All this to say that you must always declare background size using the long form. In my opinion, this will almost likely always be the case... changing background implementations risk backwards compatibility and that's a hell I'd like to avoid.
CSS Gradients
One of the many cool CSS additions to come out of Webkit is the ability to specify gradients. Whereever you would normally specify an image using a url() syntax, you can specify -webkit-gradient instead. Probably the most likely scenario will be for background images but you could use it for border-image or list-style-image, too.
background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#496178), to(#2E4960));
The syntax takes a gradient type as the first parameter: linear or radial. The next two values indicate the start and stop points of the gradient. Each parameter after that is a color-stop(x, y) function where x is a percentage or a value between 0 and 1 and y is the colour value. from and to are shortcuts for color-stop(0, y) and color-stop(1, y) respectively. This implementation mirrors the functionality within the canvas specification.
CSS gradients have made their way into the W3C as a draft spec, although the syntax is different from how Webkit has implemented it. Firefox 3.6 has just been released and now includes CSS gradients using this newer syntax which separates the two types of gradients into their own syntax: -moz-linear-gradient and -moz-radial-gradient.
background-image: -moz-linear-gradient(90deg, #496178, #2E4960);
The first parameter is the position or angle. There are a number of ways that the shorthand can be calculated and degrees are likely the easiest to use. If you're doing a gradient from top to bottom, the angle can be ignored altogether and the colour stops are all that need to be specified.
background-image: -moz-linear-gradient(#496178, #2E4960);
There's no need to specify the color-stop, from or to functions like with the webkit gradients. You can specify multiple colour stops and it'll create a gradient between each one. If you wish to adjust the position of where the gradient transitions, you can specify it as a second value with the color stop.
background-image: -moz-linear-gradient(#496178, #323232 20%, #2E4960);
You can also use rgba values, too, if you wanted to create semi-opaque gradients.
Mixing the Ingredients
Now that you know how the two things work, let's look at putting it all together. If you want to do multiple backgrounds and use CSS gradients, you'll need to do something like the following:
background-image: url(…);
background-image: url(…), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));
background-image: url(…), -moz-linear-gradient(#FFF, #000);
background-size: 10px 100px, 5px 5px;
-o-background-size: 10px 100px;
-moz-background-size: 10px 100px, 5px, 5px;
-webkit-background-size: 10px 100px, 5px 5px;
Remember when I said the other browsers ignore the entire declaration? That's right, if Firefox doesn't like -webkit-gradient (because it has no clue what it is), it'll pretend that the entire background shorthand was never declared. Opera 10.5 alpha will still recognize any url() declarations and just ignore the -webkit-gradient and -moz-linear-gradient statements. I've put in a bug report with Opera to change their behaviour to match what the other browsers do in this situation.
I'm also going to take a moment right now and rant about vendor prefixes. Yes, I know I mentioned it before but this is getting absurd. Honestly, my plea to Microsoft is to avoid jumping on this CSS3 bandwagon until specifications settle. Where they have, nail it to a tee and make sure it matches how other browsers do it. Don't be innovative.
Wrapping it up
Having been working with CSS gradients as of late, I really wanted to document the current state of things. As you can see, some features can offer up a bumpy ride when you want cross-browser compatibility (even if we are still ignoring the elephant in the room: Internet Explorer).
Check out the Demo Page
上面的话并不错，但老农说的情况是，一个实习生已经把卡簧按下去了，切断了台长的通话，如果你是台长或在场老员工，你怎么办？你会不会暂时放下手头工作，花两分钟时间为她解释一下？
