Question

摘要

SVG图片（渐变）文件编码为base64，然后添加为CSS背景
超级精简，效果很好。它还消除了对供应商前缀的需求
使用Chrome / IE / Safari 测试没有问题
Firefox问题：它将重复渐变而不是拉伸以覆盖该区域
设置背景大小以覆盖修复问题，但随后修复渐变未正确显示（见下图）

图片：

以下是添加前 FF中的内容 {background-size:cover}

现在，使用后，在FF中看起来像是 {background-size:cover}

最后，这就是Chrome / Safari / IE 中的情况或没有使用{background-size:cover}

这也是我想要的效果

问题：

如何在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>

谢谢！

Answer 1

我通过在<html>标记中添加这些额外的背景属性，让它在FF（50）中工作：

background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;

Answer 2

您是否尝试过使用background-size:100% 100%;。

如果我理解正确，它应该解决你的问题。

＆＃13;

html {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8cmFkaWFsR3JhZGllbnQgaWQ9Imc5NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjAlIiByPSIyMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzc5NDQ0NCIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzExNTU5NCIgb2Zmc2V0PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNnOTcpIiAvPgo8L3N2Zz4=);
  background-size:100% 100%;
}
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
}

＆＃13;

<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>

＆＃13;

Firefox中不需要的SVG行为 - 重复SVG渐变背景

摘要

图片：

问题：

这是我的代码;

2 个答案: