Front-end engineer Skills Photoshop skillfully (from renderings to sprite) 5--theory

Source: Internet
Author: User

"CSS Sprite"

The "define" CSS Sprite is a Web page image application processing method that allows all the scattered images involved in a page to be included in a larger picture

[1] reducing the number of HTTP requests
[2] Reduce the size of the picture, improve the load speed of the page (multiple pictures loading speed is less than the loading speed of the collage picture)

[1] Increased development costs
[2] Increased maintenance costs

"Supplemental" (Browser has a limited number of concurrent network requests)
http1.1 (persistent) http1.0 (momentary hold)
IE6, 7 2 4
IE8 6 6
Firefox 6 6
Chrome 6 6

"Scenario": it can merge only pictures that are used for the background
[1] for Set pictures, can not be merged into a large map, if the merging of these images will affect the readability of the page, the semantic reduction and the scope of the adjustment is small.
[2] for horizontal and vertical are tiled picture, also cannot use CSS cprite, if is horizontal tile, can only merge all horizontal tile diagram into a large picture, can only vertical arrangement, cannot horizontal arrangement; if it is tiled vertically, we can only merge all the vertically tiled graphs into one large image, only horizontally and cannot be arranged vertically.

"Calculation Method"
[1] Because background-position represents the starting position of the picture, starting from the upper left corner, the x-axis right is positive, the y-axis is positive. Therefore, the general sprite values are negative
[2]background-position calculation refers to the offset from 0 to the top left of the picture.
[3]left: The left side of the background is aligned to the left side of the element; Right: the right side of the background graph; Center: middle alignment element in background

"Browser compatibility scheme": IE6 does not support PNG24 translucent
[1] Treatment Method 1
[A] Save a copy of Sprite.png to the Advanced browser 24
[b] Save a copy of the sprite_ie.png with a background cut for IE 8
[2] Treatment Method 2
[A] advanced browser with CSS3
[B] Low-level browsers use transduction +hack to handle
[3] Treatment Method 3: Graceful downgrade

[1] An element has both a background image and background color, the background color must be written Background-color, if written background will overwrite the background image properties
[2] using the CSS Wizard to handle the icon must determine the size of small icons in advance, or later maintenance will be very troublesome

Front-end engineer Skills Photoshop skillfully used (from to sprite chart) 5--theory Chapter

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.