【发布时间】：2017-01-04 00:00:50
【问题描述】：
总结
-
SVG 图像（渐变）文件编码为
base64，然后添加为CSS背景 - 超级精简，效果很好。它还消除了对供应商前缀的需求
- 用
Chrome / IE / Safari测试没问题 - Firefox 的问题：它将重复渐变而不是拉伸以覆盖该区域
- 将背景大小设置为覆盖可解决问题，但随后 渐变显示不正确（见下图）
图片：
问题：
如何让背景在 FF 中看起来一样？
注意：{background-attachment: fixed} 效果很好，但它太贵了——性能方面。
这是 SVG 中的内容
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g97" gradientUnits="userSpaceOnUse" cx="0%" cy="0%" r="200%">
<stop stop-color="#794444" offset="0"/>
<stop stop-color="#115594" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g97)" />
</svg>这是我的代码；
html {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cmFkaWFsR3JhZGllbnQgaWQ9Imc5NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjAlIiByPSIyMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzc5NDQ0NCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzExNTU5NCIgb2Zmc2V0PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNnOTcpIiAvPgo8L3N2Zz4=);
}
body {
color: #aaa;
background: rgba(0, 0, 0, 0.37);
text-align: center;
}
.content {
width: 900px;
max-width: 92%;
background: rgba(0, 0, 0, .65);
padding-top: .8em;
}
img {
height: auto;
max-width: 94%;
width: auto;
margin: .5em;
border: 1px solid #444;
}
p {
text-align: justify;
word-spacing: -2px;
word-wrap: break-word;
max-width: 780px;
padding: .8em;
}
p,
body,
.content {
margin: 0 auto
}<html>
<body>
<div class="content">
<img src="http://lorempixel.com/output/city-q-g-800-400-1.jpg">
<p>Bacon ipsum dolor amet landjaeger tongue burgdoggen t-bone ham filet mignon pastrami picanha shank strip steak ball tip tail capicola tenderloin ham hock. Brisket tenderloin strip steak, prosciutto bresaola jowl alcatra ham hock kielbasa ribeye pork
belly pork loin porchetta andouille doner. Swine ribeye shank alcatra fatback bresaola drumstick. Short loin burgdoggen leberkas rump short ribs sirloin shankle meatloaf biltong porchetta ball tip frankfurter shoulder.</p>
<img src="http://lorempixel.com/output/city-q-g-800-400-2.jpg">
<p>Frankfurter fatback sausage, turducken chicken short ribs shoulder corned beef ball tip alcatra. Spare ribs brisket sirloin kielbasa short loin, beef ribs jowl porchetta pig prosciutto doner tenderloin. Shankle burgdoggen biltong jowl chuck, landjaeger
turkey picanha hamburger short loin. Fatback rump tail doner. Brisket cupim meatloaf picanha pastrami. Short ribs doner brisket ground round porchetta shank.</p>
<img src="http://lorempixel.com/output/city-q-g-800-400-4.jpg">
<p>Chuck turkey jowl porchetta. Doner shank swine cupim pastrami pancetta turducken fatback pork tail boudin ham hock ball tip bresaola. Burgdoggen ground round pork flank beef ribs, tri-tip ham tongue spare ribs short loin pork belly boudin meatball
andouille. Salami ball tip tri-tip doner. Kevin pastrami brisket ribeye shank tongue short ribs. Doner picanha ham cow tri-tip porchetta.</p>
<img src="http://lorempixel.com/output/city-q-g-800-400-5.jpg">
<p>Short loin jowl brisket picanha ham hock kielbasa cupim doner bresaola pancetta pastrami spare ribs fatback. Flank salami porchetta, hamburger rump cow pig turkey frankfurter. Tail picanha strip steak beef. Tri-tip kielbasa spare ribs turkey.</p>
<img src="http://lorempixel.com/output/city-q-g-800-400-7.jpg">
<p>Bacon ipsum dolor amet landjaeger tongue burgdoggen t-bone ham filet mignon pastrami picanha shank strip steak ball tip tail capicola tenderloin ham hock. Brisket tenderloin strip steak, prosciutto bresaola jowl alcatra ham hock kielbasa ribeye pork
belly pork loin porchetta andouille doner. Swine ribeye shank alcatra fatback bresaola drumstick. Short loin burgdoggen leberkas rump short ribs sirloin shankle meatloaf biltong porchetta ball tip frankfurter shoulder.</p>
</div>
</body>
</html>谢谢！
【问题讨论】：
-
我无法在我的 Firefox 浏览器中重新创建上述问题