13518219792
这篇文章将为大家详细讲解有关CSS中图片处理方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比克拉玛依网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式克拉玛依网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖克拉玛依地区。费用合理售后完善，十余年实体公司更值得信赖。
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编码)
* 
* @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这个文件，然后
