一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点。跟版模板网在制作WordPress主题时,也尽可能在这方面做最大的优化,当然了,跟版模板网技术不到家,所以只好使用一些简单的工具来操作。今天跟版模板网就推荐一款CSS Sprites在线生成器CSS Sprites Generator。

如果你不知道什么叫CSS Sprites,就自己搜索一下吧,跟版模板网就不介绍了。

csssprites.com是跟版模板网比较喜欢的网站,通过它可以简单几步就拼合了背景图片,下面就一起来看看吧

访问CSS Sprites Generator,就可以看到如下界面

CSS Sprites Generator操作方法

1.首先选择需要拼合的图片(最好是大小、格式都一样的,但也不绝对),如跟版模板网演示时,就选择了自己设计的几个小图标(宽高都为20px)

2.点击+options展开设置选项Padding between elements:图片与图片的间距 (根据自己的需要设置)

Border around the whole image:每个图片的边框(通常为0px)

Align elements:对齐方式,left为左对齐(纵向排列),top为顶部对齐(横向排列)

Background color:背景颜色,transparent继承原图背景,或者自动以RGB颜色

3.设置好以后,点击generate!按钮即可生成

4.接着你可以查看和下载生成的图片,CSS Sprites Generator还自动给出了每个图标的调用方法,如果你了解CSS Sprites技术,相信调用就不是问题了。CSS Sprites Generator还是有不少局限的,仅仅提供了简单的左对齐和顶部对齐这两种方式,如果可以在线自由拖动调整图片的位置,这样就非常强大啦!期待以后有这样的功能!

好了,你自己也去亲自体验一下吧:CSS Sprites Generator

如果你也有搜集一些好的建站工具,一定和跟版模板网分享哦!!

css 在线生成器,CSS Sprites在线生成器相关推荐

  1. 【转载】Sitemap在线生成器,网站地图在线生成工具

    Sitemap在线生成器,网站地图在线生成工具 找了几个在线生成网站地图的网站试了下,各有千秋,但共同的缺点是都是英文,好在都是些简单的英文,阅读还不成问题,基本上都能看懂. 下面就是我对三个在线生成 ...

  2. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码...

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  3. php+条形码在线怎么生成,[条形码生成器]php实现在线生成条形码例子分享

    [条形码生成器]php实现在线生成条形码例子分享 分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/1/10 代码如下: define('IN_CB',true); incl ...

  4. css动画在线生成,在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  5. CSS+HTML实现学成在线静态页面

    CSS3+HTML实现学成在线静态页面 1.使用工具 1.VScode 2.Chome浏览器 3.Adobe Photoshop CC 2019 2.CSS书写顺序 1.布局定位属性 display ...

  6. HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作

    ❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...

  7. HTML+CSS期末大作业:在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript

    HTML+CSS期末大作业:在线音乐网站设计--简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕 ...

  8. 优质的饼状图生成器(可在线编辑)

    下载地址 一款优质的饼状图生成器,支持在线编辑,可根据需求设置条件参数如"名称.数值.半径.厚度"等即可自动生成饼状图. dd:

  9. HTML+CSS+JS网页设计期末课程大作业 :音乐在线网站设计——音乐在线听平台网站(26页) 网页设计成品DW静态网页Html5响应式css3

    HTML5期末大作业:音乐在线网站设计--音乐在线听平台网站(26页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页 ...

最新文章

  1. 机器学习分类指标:精确率、准确率、召回率详解
  2. pytorch环境下“No module named SimpleITK”的解决办法
  3. QEMU,一个快速的和便捷的动态翻译器(论文译文)
  4. [Qt教程] 第30篇 XML(四)使用流读写XML
  5. 1111 复习 形状的打印
  6. MongoDB介绍与安装
  7. java数组查找文本_基于数组的二叉查找树 Binary Search Tree (Java实现)
  8. python怎么看待_如何看待将Python作为少儿编程的基础语言?
  9. 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表't_ArticleFiles'中的标识列指定显式值。...
  10. 工业互联网:制造业的二次升级
  11. switch语句表达式和执行流程
  12. 【计算机网络】第六部分 应用层(25) 域名空间
  13. mongodb update操作
  14. 【邢不行|量化小讲堂系列06-Python量化入门】极简方法将日线数据转为周线、月线或其他周期
  15. 一个屌丝程序猿的人生(五十三)
  16. java怎样实现换肤功能_JavaScript实现换肤功能
  17. 矿卡又称矿山自卸车Mining Dump Truck
  18. 资讯汇总230212
  19. python可以应用于哪些方面?
  20. 单片机c语言指针作用,单片机C语言教程:C51指针的使用

热门文章

  1. (每日一题)P1447 [NOI2010] 能量采集(莫反套路 + 欧拉反演 / 容斥原理)
  2. 【分块】#6277. 数列分块入门 1(区间修改、单点查询)
  3. 解题报告:luogu P2423 [HEOI2012]朋友圈【最大团转最大点独立集(匈牙利算法+时间戳优化)】
  4. 设计模式——命令模式(Command Pattern)
  5. 94.二叉树的中序遍历
  6. 平面分治详解 超级详细(附带例题 最近点对问题(给了题目))(UVA10245,P1257,P1429)
  7. 目标立体检测 红外图像_一种有效的红外小目标检测方法
  8. Hibernate学习总结【比较与Mybatis框架之间的区别】
  9. Android HAL模块的加载过程
  10. Maven学习-项目对象模型