CSS中图片处理方式有哪些

这篇文章将为大家详细讲解有关CSS中图片处理方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

CSS里面有很多地方需要设置背景图片，对图片的处理方式会出现各种各样的小毛病，或路径（尤其在部署的时候）或请求量，大致有如下几种

第一、最普通的直接引入一个图片

这样的后果是如果有很多图片，就需要多次请求服务器，在使用缓存的情况下，先先得去服务器走一遍

第二、把若干小图整成一个大的

如淘宝：

然后在进行CSS定位，而图片只需要下载一次到本地即可

第三、进行图片Base64位处理

一张图片最后变成一段字符串，如

进过Base4处理：

/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh......这里省略

在CSS代码找可以这样使用

.image{

background-image: url('data:image/jpg;base64,上面的字符串')

}

如何把图片编程base64字符串，使用Java可以有如下方法：

/**

* 把一个图片转换成BASE64编码的字符串，以便能够在CSS里面使用该字符串

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

* <img src="data:image/jpg;base64,BASE64编码"/>

* @param image 图片

* @param type jpeg, bmp,图片格式

* @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;

}

第四、图片字体化处理

针对小图标什么的，这样处理特别有效，不仅仅可以缩放不失真，还可以改变颜色，相当于某种字体，我们对字进行加色，变形都很方便，这种方式需要一些工具，网上也有很多，比如阿里的：http://iconfont.cn/repositories

一般工具生成如下几个文件

iconfont.css主要是构建其余文件组织到一个可以引用的CSS；

@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+*/

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"; }

常规文件先引入iconfont.css这个文件，然后

<i class="iconfont">&#x33;</i>

或者引用相应的CSS

<span class="iconfont icon-yiyaoxiang"></span>

关于“CSS中图片处理方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。