CSS-Using Backgrounds for Effect

2019独角兽企业重金招聘Python工程师标准>>>

#Using Backgrounds for Effect
In this chapter, you will learn about • Fixed- and flexible-width rounded-corner boxes • The sliding doors technique • Multiple background images and the border-radius property • CSS drop shadows • Opacity and RGBa • Getting PNGs to work in older versions of Internet Explorer • Parallax scrolling • Image replacemen

##Background image basics
Applying a background image is easy. Say you want your website to have a nice tiled background. You can simply apply the image as a background to the body element:

body {
	background-image:url(/img/pattern.gif);
}

The default browser behavior is to repeat background images horizontally and vertically so that the image tiles across the whole of the page.For more control, you can choose whether your background image tiles vertically, horizontally, or not at all(可以选择背景图像是谁知平铺、水平平铺，还是根本不平铺)。
Gradients（渐变） are very fashionable at the moment, so you may want to apply a vertical gradient to your page instead. To do this, create a tall but narrow gradient graphic. You can then apply this graphic to the body of the page and let it tile horizontally.

body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
}

Because the gradient has a fixed height（渐变图像的高度是固定的）, it will stop abruptly if the content of the page is longer than the height of the image. You could choose to create a really long image, possibly one that fades to a fixed color. However, it is always difficult to predict how long a page will become. Instead, simply add a background color as well. Background images always sit on the top of the background color, so when the image runs out the color will be displayed. If you choose a background color that is the same as the bottom of the gradient, the transition between image and background color will be seamless.

body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
background-color: #ccc;
}  

Last, it is possible to set the position of your background image. Say you want to add a bullet to every headline on your site, as shown in Figure 4-1. You could do something like this:
h1 { padding-left: 30px; background-image: url(/img/bullet.gif); background-repeat: no-repeat; background-position: left center; }

The last two keywords indicate the positioning of the image. In this case, the image will be positioned to the left of the element and vertically centered. As well as using keywords, you can set a background image’s position using units such as pixels or percentages.

##Rounded-corner boxes
###Fixed-width rounded-corner boxes
Fixed-width rounded-corner boxes are the easiest to create. They require only two images: one for the top of the box and one for the bottom.

转载于:https://my.oschina.net/LosersAFC/blog/213253