Firefox 中固定背景的 CSS/HTML 边框半径问题答案

【问题标题】：CSS/HTML border radius issue with fixed backgrounds in FirefoxFirefox 中固定背景的 CSS/HTML 边框半径问题
【发布时间】：2019-10-04 16:59:53
【问题描述】：

我不太明白一些基本的 HTML/CSS 代码会发生什么：

HTML：

<div class="class1">
  <div class="class2">
    hello
  </div>
</div>

CSS：

.class1
{
  height:300px;
  background: url('https://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg') center no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
  padding:60px;
}

.class2
{
  background: url('https://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') center no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  border-radius: 100px;
  line-height:100px;
  color:white;
}

我还做了一个代码笔来“现场展示”，here。

我的问题是我在边界半径处得到了一些奇怪的“黑色”，我不知道为什么。以下是一些图片：

在左侧，我使用 IE11 得到了预期的结果，但在左侧，我使用 Firefox（最新版本）得到了一个奇怪的结果。

我的问题是，我该如何解决这个问题，以便两个浏览器都向我显示左图的结果（即摆脱黑色）？

谢谢！

【问题讨论】：

对于 Firefox 42，我认为没有问题。但是，使用 Firefox 43.0.1 和 44.0.2 我可以。很有趣。
这是由于 Firefox 中的错误。看来background-attachment:fixed 是造成这种情况的原因。
奇怪，我看到的是一样的，但它是白色的，而不是黑色的。但我同意@agrm，一定是一个错误。我会file a bug with Mozilla。看看是否已经提交了与此相关的错误。
我明白了，我对 html/css 的有限经验让我不确定，所以如果这是一个错误，我想那是不同的。如果有人找到解决方法，我仍然会对解决方法感兴趣。曾经我的 IE11 是正确的，而不是 Mozilla，这很有趣。

标签： html css firefox background

【解决方案1】：

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        .class1 {
            height:969px;
            background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/photo-1501621965065-c6e1cf6b53e2.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            background-attachment:fixed;
            padding:60px;
        }
        .class2 {
            background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/new-york.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            border-radius: 100px;
            line-height:100px;
            color:white;
        }

    <div class="class1">
        <div class="class2">hello</div>
    </div>

【讨论】：