我是一名开源开发人员，我的网络框架 ( http://m-m-m.sf.net ) 致力于纯 HTML5 和 CSS3。 我想通过 input:invalid 规则在 CSS 中向右对齐来绘制验证错误图标。 但它只适用于 FF 而不是基于 webkit 的浏览器，如 Chrome 或 Safari。 我创建了一个最小的独立 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>
有什么想法吗？
最佳答案
您可以尝试为 svg 背景图像使用 base64 编码数据 uri。
这是它在 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，因为 Windows 上的 Chrome 将另一种(等宽)字体向右渲染了 2px，您可以稍微玩一下。我在网上用过这个encoder .
这是使用等宽字体的相同 svg:
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");
和一个jsfiddle
关于css - 通过 CSS 的 SVG 背景图像未在 webkit 浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16405475/