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

Source: Internet
Author: User
Tags set background

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:

  1. background-image: linear-gradient (to left, transparent 0, transparent 50%, #d9d9d9 50%, # D9d9d9 100%);
  2. -webkit-background-size: 1px 100%;
  3. Background-size: 1px 100%;
  4. 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 {
  1. Background: url ("Http://img.to8to.com/wap/v2/m3icon.png") no-repeat;
  2. width: 50px;
  3. Height: 51px;
  4. 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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.