背景Chrome中无效的属性值 [英] background Invalid property value in Chrome
问题描述
我在Chrome中得到背景无效的属性值.我在这里想念什么?
I am getting background Invalid property value in Chrome. What am I missing here?
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Email template</title>
</head>
<body style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;">
<div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;">
<div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;">
Lorem ipsum
</div>
<div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
Lorem ipsum
</div>
<div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
Lorem ipsum
</div>
<div class="t32" style="background: url( 'data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><path fill='none' stroke='#be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/></svg>'); background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
Lorem ipsum
</div>
</div>
</body>
</html>
因为这是电子邮件模板，所以我需要内嵌样式.
Since it is an email template I need my styling to be inlined.
如您所见，没有显示任何复选标记(我正在后台借助svg进行绘制).
As you can see no check mark is displayed (I am drawing it with the help of svg in background).
这里是jsfiddle.
Here is the jsfiddle.
推荐答案
You may want to read first this article: Optimizing SVGs in data URIs. The essence is: whenever you’re using an SVG as a data URI:
-
将其属性值的双引号替换为单引号.
Swap its attribute values’ double quotes with single quotes.
对<，>，#，剩余的所有"(例如在文本内容中)，非ASCII字符以及其他URL不安全的字符(例如％)进行编码.
Encode <, >, #, any remaining " (like in textual content), non-ASCII characters, and other URL-unsafe characters, like %.
使用URI时，请用双引号将其引起来:url(").
Wrap the URI with double quotes when using it: , url("").
希望对您有帮助.
.t32{background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: 0 0;
background-size: 32px 20px;
margin-top: 20px;
padding-left: 35px;
color: #4a4a4a;
font-size: 20px;}<div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;">
<div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;">
Lorem ipsum
</div>
<div class="t32">
Lorem ipsum
</div>
<div class="t32">
Lorem ipsum
</div>
<div class="t32">
Lorem ipsum
</div>
</div>更新:这次是内联CSS的示例.
UPDATE: this time an example with inline CSS.
请注意，我使用& quot 作为CSS中的第三种引号
Please note that I'm using " as a third type of quotes in CSS
<div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;">
<div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;">
Lorem ipsum
</div>
<div class="t32" style="background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/%3E%3C/svg%3E");background-repeat: no-repeat, no-repeat; background-position: 0 0; background-size: 32px 20px; margin-top: 20px; padding-left: 35px; color: #4a4a4a; font-size: 20px;">
Lorem ipsum
</div>
</div>这篇关于背景Chrome中无效的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
