Jör*_*örg 5 css svg webkit background-image
我是一名开源开发人员,使用我的webframework(http://mmm.sf.net)进行纯HTML5和CSS3 .我想通过输入绘制验证错误图标:CSS中的无效规则与右边对齐.但它只适用于FF,但不适用于基于webkit的浏览器,如Chrome或Safari.我为测试创建了一个最小的standanlone html(没有验证和:无效):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!--
input {
border-color: #ff2222;
background-color: #ff8888;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>");
background-repeat: no-repeat;
/* background-size: auto; */
background-position: 98% 50%;
}
-->
</style>
</head>
<body>
<input type="text" placeholder="type here" />
</body>
</html>
有任何想法吗？
您可以尝试使用base64编码数据uris svg背景图像.
这就是它在CSS中的样子:
input {
border-color: #ff2222;
background-color: #ff8888;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogU2Fucy1zZXJpZjsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");
background-repeat: no-repeat;
/* background-size: auto; */
background-position: 98% 50%;
}
我将其font-family改为Sans-serif,因为其他(Monospaced)字体在Windows上被Chrome渲染了2px,你可以稍微玩一下.我用过这个在线编码器.
这是与Monospaced字体相同的svg:
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");
和一个小人