Home > Developer > Web Develop
The following is the picture after the display, I believe that on many sites can see this effect, at present I know two ways to achieve
1. Background-position plus a picture
Image: Http://www.brookstone.com/webassets/pwr/engine/images/stars.gif
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <Linkrel= "stylesheet"href= "Style.css">6 <Scriptsrc= "Script.js"></Script>7 <style>8 . Star{9 Height:20px;Ten Line-height:20px; One width:112px; A Background-image:url (' http://www.brookstone.com/webassets/pwr/engine/images/stars.gif '); - background-position:0-69px; - background-repeat:no-repeat; the } - - </style> - </Head> + - <Body> + <Divclass= "Star"></Div> A at - </Body> - - </HTML>
This is the simplest background-position positioning, However, if you still feel that stars.gif is larger, you can use the second method, but before using the second method must be cut stars.gif with Photoshop, cut into two pictures, no gold stars (5 gray stars) and 5 golden Star two pictures, all kinds of stars are shed, of course, I am more lazy, The following demo image is not cut with tools, directly using the original stars.gif.
2. CSS Clip Properties
Browser support
The clip property is supported by all major browsers.
The Clip property trims an absolutely positioned element.
Clip::rect (top, right, bottom, left)
Position:absolute this must have
<!DOCTYPE HTML><HTML> <Head> <Linkrel= "stylesheet"href= "Style.css"> <Scriptsrc= "Script.js"></Script> <style>. Star1{margin:10px 0 0 0;Height:20px;Line-height:20px;width:112px;Background-image:url (' http://www.brookstone.com/webassets/pwr/engine/images/stars.gif ');background-position:0 0; }. star1. Inner{Height:20px;Line-height:20px;width:112px;Background-image:url (' http://www.brookstone.com/webassets/pwr/engine/images/stars.gif ');background-position:0-230px;position:Absolute;Clip:rect (0px,61px,21px,0px); } </style> </Head> <Body> <Divclass= "Star1"> <Divclass= ' inner '></Div> </Div> </Body></HTML>
The advantage of clipping with RECT is that even if you want 1.2 stars, you just need to change the second parameter of CLICP rect, and 61px changes to 27.6px,clip:rect (0px,27.6px,21px,0px);
Calculation method A star 23px,1.2 star: 23+23/10*2=27.6, display effect:
In contrast to the first, stars.gif this picture has to constantly add all kinds of worthy stars, the benefits are obvious, the second flexible picture small, reduce transmission overhead.
Note: The picture in the . STAR1 style should be 5 gray stars, and the picture instar1 inner should be 5 golden stars.
CSS two dynamic display of star level comparison (one star, two stars, Samsung, four stars, five-star)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
