SVG样式规则在通过CSS添加时不受尊重，但在HTML中通过元素<style>标记显式设置时受到尊重

Question

我正在尝试在我的网页上集成一个小的SVG图像。我将它用作 body 的 background-image 。图像是一个小的路径网格，漆成黑色。 请注意＆lt; style＆gt; 标记。

＆＃xA;＆＃xA;

 ＆lt; svg xmlns =“http：/ /www.w3.org/2000/svg“xmlns：xlink =”http://www.w3.org/1999/xlink“width =”1000px“height =”500px“viewBox =”0 0 1000 500“zoomAndPan = “禁用”preserveAspectRatio =“none”＆gt;＆＃xA;＆＃xA; ＆lt; style type =“text / css”＆gt;＆lt;！[CDATA [＆＃xA;线＆＃XA; {＆＃XA;中风：rgba（0,0,0，0.75）; / *颜色* /＆＃xA;笔画宽度：1px;＆＃xA; }＆＃XA; ]＆GT;＆LT; /风格＆GT;＆＃XA;＆＃XA; ＆lt; line x1 =“1100”y1 =“500”x2 =“ -  1000”y2 =“250”/＆gt;＆＃xA; ＆lt; line x1 =“1100”y1 =“500”x2 =“ -  1000”y2 =“ -  100”/＆gt;＆＃xA; ＆lt; line x1 =“1100”y1 =“500”x2 =“ -  1000”y2 =“ -  500”/＆gt;＆＃xA; ＆lt; line x1 =“1100”y1 =“500”x2 =“ -  250”y2 =“ -  500”/＆gt;＆＃xA; ＆lt; line x1 =“1100”y1 =“500”x2 =“300”y2 =“ -  500”/＆gt;＆＃xA; ＆lt; line x1 =“1100”y1 =“500”x2 =“750”y2 =“ -  500”/＆gt;＆＃xA;＆＃xA; ＆lt; line x1 =“1750”y1 =“0”x2 =“750”y2 =“500”/＆gt;＆＃xA; ＆lt; line x1 =“1500”y1 =“0”x2 =“500”y2 =“500”/＆gt;＆＃xA; ＆lt; line x1 =“1150”y1 =“0”x2 =“150”y2 =“500”/＆gt;＆＃xA; ＆lt; line x1 =“700”y1 =“0”x2 =“ -  300”y2 =“500”/＆gt;＆＃xA; ＆lt; line x1 =“150”y1 =“0”x2 =“ -  850”y2 =“500”/＆gt;＆＃xA;＆＃xA;＆lt; / svg＆gt;＆＃xA;  

＆＃xA;＆＃xA;

如果我在CSS中将其设置为背景图像，就像这样：

＆＃xA;＆＃xA ;

 <代码>。体{＆＃XA; background-image：url（“images / intro.svg”）;＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

显示白色。＆＃xA;或者，当我通过HTML显式设置时：

＆＃xA;＆＃xA;

 ＆lt; body style =“background-image：url（ 'images / intro.svg'）;“＆gt; foo foo foo＆lt; / body＆gt;＆＃xA;  

＆＃xA;＆＃xA;

它显示正常。黑色，75％不透明度（alpha）。

＆＃xA;＆＃xA;

这里发生了什么？无论如何，我可以解决这个问题，而无需通过HTML明确地做到这一点？

＆＃xA;