Question

我是一名开源开发人员，使用我的webframework（http://m-m-m.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>

有什么想法吗？

Answer 1

您可以为svg背景图片尝试 base64 编码数据uris。

这就是它在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，您可以稍微玩一下。我在网上使用了encoder。

这是与Monospaced字体相同的svg：

  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");

和jsfiddle

通过CSS的SVG背景图像未显示在webkit浏览器中

1 个答案: