适用场景:

  • 本地通过stylish等插件自定义网站样式时
  • 开通css自定义的空间但暂无图片上传途径时
  • ……
 
举例:
 
  把视频页的缩略图边框改为下面这种
    
  .main_list ul li img {
    width: 100px;  /* 图片宽度 */
    height: 75px;  /* 图片高度 */
    padding: 2px 2px 4px 2px;  /* 四周内部留白 (上 右 下 左) */
    border: none;  /* 去掉默认边框 */
    background: url(data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAGgAAABSCAYAAAC4/ZFqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAa9JREFUeNrs3btqG0EUgOEZo/iCCxWBvEDABAJu3TtPI7X26+U91DlV
KkNwIQjWZXKWzIJYVrvBGHsJ3w/HMyvJWJ5PUqucUprHfIm5TJpS65hVs7lZLpd3RZOqMWlscvy4
jevvsWYv2klVcs7fTpzDtAMESIAACZAAARIgQAIkQIAESIAACRAgARIgQAIESIAECJAACRAgAQIk
QAIESIAACZAAARIgAQIkQIAESIAACRAgARIgQAIkQIAECJAACRAgAQIkQAIESIAECJAAARIgAQIk
QIDSerFY3MdazHSmmqyb7++ex1zFXMd8jfkc8ynmLP39fu99zDZmd7B2Z9szmyP77u+1+32d9km2
+9S5fey+9v7UuS0NrG25s7b79/ie8x8xq1kp5Snn/FAP8SnmZ8zHmNP6j24O5rlzvTmCsx24b9eD
sj9y0KXnoMvA4Y+B9KGUHqDUg/KmSI1Ls87q9e+Yx/okfsVc1o+//cjBHx704YEP3VZ6MFJnP3aQ
L3ncaxza7q3fRjn+aIp30IfYn8dc1HVWscqRQx575aeBz9d/PcTyggMs6T/rjwADAKV0uPsw4khE
AAAAAElFTkSuQmCC) no-repeat;  /* 图片背景,不重复平铺 */
  }
  注意:上面具体使用的时候把base64中的换行去掉,这里是为了换行显示的需要(话说这里通过正常途径不能直接编辑html啊 -。=)
 
  于是现在图片就变成这样了,我们成功把那张边框图像内嵌到了css文件中。
    
 
小工具:
 
  gif、jpeg、png图片转换为base64字符串的工具,把图片文件拖放到exe上就把结果复制到剪贴板中了,在需要的地方粘贴即可。

【Web前端】把图片嵌入到css样式表中(附小工具)的更多相关文章

  1. 进击的Python【第十三章】:Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  2. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  3. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  4. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  5. web前端(7)—— 了解CSS样式,引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  6. css样式表中的样式覆盖顺序

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...

  7. css样式表中的样式覆盖顺序(转)

    有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码   #navigator { height: 100%; width: 200; position:  ...

  8. Web前端面试指导(十三):css样式的优先级是怎么样的?

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  9. 从css样式表中抽取元素尺寸

    jS从样式表取值的函数.IE中以currentStyle,firefox中defaultView来获取 DOM.style仅仅能读到写在html中的样式值 获取样式值的函数 function retu ...

随机推荐

  1. 开始体验第一个JAVA程序吧!

    一.准备工作(配置环境) 1.安装JAVA开发工具(JDK) a.下载符合自己电脑系统的Java开发软件:http://www.oracle.com/technetwork/java/javase/d ...

  2. P1198 [JSOI2008]最大数【树状数组】

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制: L 不超过当前数列的长度. (L &g ...

  3. Linux之rsync同步工具介绍+inotify同步

    1.rsync介绍 Rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份的优秀工具.Rsync软件适用于unix/linux/windows等多种操作平台. rsync, ...

  4. 笔记-twisted

    笔记-twisted 1.      简介 Twisted is an event-driven networking engine written in Python and licensed un ...

  5. JS中调用android和ios系统手机打开相机并可选择相册功能

    编写不易,如有转载,请声明出处: 梦回河口:http://blog.csdn.net/zxc514257857/article/details/57626154 实现android手机打开相机选择相册 ...

  6. Android+Handler+Thread 那些事儿

    前言,才开始学安卓十几天,不料被线程挡住了前进的步伐,因为之前操作系统课程并没有认真听老师讲课,导致现在理解这些抽象的东西有些小困难.没关系,苦学之路,总会碰到坎坷,这里也给那些迷失在Android之 ...

  7. error LNK2001: unresolved external symbol @__security_check_cookie

    Q:VS2005编译的静态库, 在vc++6.0中连接出现错误 error LNK2001: unresolved external symbol @__security_check_cookie@l ...

  8. mybatis和redis整合 log4j打印sql语句

    首先,需要在项目中引进jedis-2.8.1.jar包,在pom.xml里加上 <dependency> <groupId>redis.clients</groupId& ...

  9. 程序员需要的各种PDF格式电子书【附网盘免费下载资源地址】

    程序员需要的各种PDF格式电子书[附网盘免费下载资源地址]   各位,请妥善保存,后期还会有更多更新,如果你有不同的书籍资源或者这里没有你要找的书籍,也可以直接留言,后期我们会继续更新~ Java & ...

  10. 【APUE】Chapter12 Thread Control

    今天看了APUE的Chapter12 Thread Control的内容,记录一下看书的心得与示例code. 这一章的内容是对Chapter11 Threads(见上一篇日志)的补充,大部分内容都是理 ...