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