Shulou(Shulou.com)06/02 Report--

This article will explain in detail what the picture processing methods are in CSS. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

There are many places in CSS that need to set background images, and there will be a variety of glitches in the way the images are handled, or the path (especially when deploying) or the number of requests, roughly as follows

First, the most common one is to introduce a picture directly.

The consequence is that if you have a lot of pictures, you need to request the server many times. In the case of using cache, you have to go to the server first.

Second, integrate some small pictures into a large one.

Such as Taobao:

Then CSS positioning is carried out, and the picture only needs to be downloaded to the local area once.

Third, carry on the picture Base64 bit processing

A picture ends up as a string, such as

Entered the Base4 processing:

/ 9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh. Omitted here

In the CSS code, you can use it like this

.image {

Background-image: url (_ 'data:image/jpg;base64, above string')

}

How to program a picture into a base64 string, you can use Java in the following ways:

/ * *

* convert a picture into a BASE64-encoded string so that the string can be used in CSS

* background-image: url (_ 'data:image/jpg;base64,BASE64 encoding)

*

* @ param image Picture

* @ param type jpeg, bmp, picture format

* @ return encoded string

, /

Public static String encodeToString (BufferedImage image, String type) {

String imageString = null

ByteArrayOutputStream bos = new ByteArrayOutputStream ()

Try {

ImageIO.write (image, type, bos)

Byte [] imageBytes = bos.toByteArray ()

BASE64Encoder encoder = new BASE64Encoder ()

ImageString = encoder.encode (imageBytes)

ImageString=imageString.replaceAll ("[\ t\ n\ r]", "")

Bos.close ()

} catch (IOException e) {

E.printStackTrace ()

}

Return imageString

}

Fourth, the font processing of pictures.

For small icons and so on, this processing is particularly effective, not only can zoom without distortion, but also can change the color, equivalent to a certain font, we add color to the word, deformation is very convenient, this way requires some tools, there are many on the Internet, such as Ali: http://iconfont.cn/repositories

General tools generate the following files

Iconfont.css mainly builds the rest of the files and organizes them into a CSS that can be referenced

@ font-face {font-family: "iconfont"

Src: url ('iconfont.eot'); / * IE9*/

Src: url ('iconfont.eot?#iefix') format (' embedded-opentype'), / * IE6-IE8 * /

Url ('iconfont.woff') format (' woff'), / * chrome, firefox * /

Url ('iconfont.ttf') format (' truetype'), / * chrome, firefox, opera, Safari, Android, iOS 4.2 percent /

Url ('iconfont.svg#iconfont') format (' svg'); / * iOS 4.1-* /

}

.iconfont {

Font-family: "iconfont"! important

Font-size:16px

Font-style:normal

-webkit-font-smoothing: antialiased

-webkit-text-stroke-width: 0.2px

-moz-osx-font-smoothing: grayscale

}

.icon-yiyaoxiang:before {content: "\ f006b";}

.icon-zhanghu:before {content: "\ f00bb";}

.icon-mulu:before {content: "\ f00e1";}

.icon-shouye:before {content: "\ e607";}

The regular file first introduces the iconfont.css file, and then

three

Or refer to the corresponding CSS

This is the end of this article on "what are the ways of picture processing in CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.