Question

我真的不明白一些基本的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;
}

我还做了一个代码工具来＃34;现场直播＆＃34;，here。

我的问题是我得到一些奇怪的＆＃34;黑色＆＃34;在边界半径，我不知道为什么。这是一些照片：

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

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

谢谢！

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

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

1 个答案: