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编码)* * @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(“[tnr]”, “”);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这个文件，然后或者引用相应的CSS
关于“CSS中图片处理方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看 香港云主机到。

相关推荐: CSS中怎么使用background-position属性

本文小编为大家详细介 香港云主机绍“CSS中怎么使用background-position属性”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS中怎么使用background-position属性”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来…