How to add a background gradient image from top to bottom?
body {
color:#999;
background-color:#000;
font-family:"Helvetica Neue", Helvetica, arial, sans-serif;
font-size:11px;
line-height:1.8em;
background-image: url(../images/bck.jpg);
paddi开发者_如何学Gong:0;
margin:0;
}
How can i modify it to add a gradient background image from the top to bottom of the site?
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
Edit it as it suits you.
Mob has a good answer for CSS3. However, if you want to use an image to support older browsers, but want it to repeat in only a certain direction, just use repeat-x or repeat-y, as follows:
background: #000 url('../images/bck.jpg') repeat-x;
If you'd rather keep your rules separate, just add:
background-repeat:repeat-x;
to your rules. You can also use 'repeat-y' or 'no-repeat', depending upon your needs. As you saw already, the default behavior is to repeat-all. If you are not worried about legacy support, Mob's answer is a good fit, as it doesn't rely on a fixed image size, and it will always span the proper distance, regardless of the height of your content.
精彩评论