Background-image achieve border effect and multi-figure PNG how to achieve background-size as the original half

Chairman Mao said: 3rd do not study, Miss Liu Shaoqi.

Nearly two months of crazy Rush project, do almost vomit, today is not available to browse the other people's website, the benefits of a lot, solved I have always thought quite tricky two big problems.

First, Background-image realize border effect

Why so much trouble? Not directly with border? This is because the mobile phone home often with nine Gonglai arrangement of picture menu, is generally used as a percentage to evenly distribute the size of each lattice, if the lattice is more than 1px border, it will be very awkward and difficult to deal with.

Background-image is characterized by occupying the entire size of the element, including the padding and borders.

Example:

2. background-image: linear-gradient (to left, transparent 0, transparent 50%, #d9d9d9 50%, # D9d9d9 100%);
4. -webkit-background-size: 1px 100%;
6. Background-size: 1px 100%;
8. Background-repeat: repeat-y!important;

Also quite troublesome, but also without losing the solution to the problem, listed for expansion of ideas.

Two, multi-figure PNG how to achieve background-size as the original half

General website is used to put all icon icons in a PNG format in a picture, one is the multi-icon file with a single icon file size difference, can be more space-saving, but also easy to load.

But I used to do mobile site, because the actual size of the picture is put in the figure of twice times, so that can achieve high-definition effect, but the picture is placed in a file, with Background-size always unsuccessful, had to separate into a separate file to control. Now refer to someone else's website and find out what others have achieved:

Method One:

Overall:

. Main-enter span, . knowlage I {

2. Background: url ("Http://img.to8to.com/wap/v2/m3icon.png") no-repeat;
4. width: 50px;
6. Height: 51px;
8. background-size: 50px; }

Specific icons only need to be set background-position:

. Main-enter Span.icon-zxgl-enter { background-position: 0-58px; } Method Two,

1. Background: url (http://img.to8to.com/wap/v2/icon-se174a62dfa.png?v=20150515) no-repeat;
2. Background-size: 187.5px 1087px;

Compress the entire picture directly (image size is 375*2174)

How to use the concrete should be used in the actual test.

There are also some of the following areas worth learning:

1. Baidu Mobile search assist with the label of PC and WAP:

<meta name= "mobile-agent" content= "Format=html5;url=http://m.to8to.com/hz" >

Add this, Baidu search by mobile phone will automatically navigate to the mobile site

2. Section label for main function area

3. Each part of the code block plus comments

The 4.canonical tag is used to solve the duplication of content caused by the same content in different URLs .

<link rel= "canonical" Href= "http://hz.to8to.com/" >

Reference website: Tu-ba Rabbit

http://hz.to8to.com/

Http://m.to8to.com/hz

Background-image achieve border effect and multi-figure PNG how to achieve background-size as the original half