【Web前端】把图片嵌入到css样式表中（附小工具）

适用场景：

• 本地通过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上就把结果复制到剪贴板中了，在需要的地方粘贴即可。

  地址：http://files.cnblogs.com/tsorgy/Pic2Base64.zip