背景图像不会缩放以适合页面

Question

我正在尝试让这个背景图像重新应用到 div 容器中。我希望它保持相同的大小，这样当屏幕比例改变时它不会变成 'zoomed in'。但是，目前只是放大，并没有保持原尺寸：

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -moz-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #e6739f 60%);
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.top-container:before {
  content: "";
       background: url("./../images/skulls.PNG") no-repeat center center fixed;
       background-repeat: no-repeat;
       background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       background-position: center;
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.2;
       width: 100%;
       height: 100%;
}

有什么建议吗？

编辑：图片已经很小了，所以我想要的是它保持相同的大小，并不断重新应用自身以适应 div。但它并没有这样做，只是放大了，这会扭曲图像。

Answer 1

有几个问题，头骨没有重复，它覆盖了整个 div 这意味着它看起来 'fuzzy' 因为它基本上是一个小图像。另外，请注意 IOS 无法处理已修复的背景附件。

去掉无重复（有几个）和固定的，让头骨以其自然大小显示，我们得到如下片段的效果：

.top-container {
  background:      background: -webkit-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: -moz-linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
    background: linear-gradient(70deg, #790c5a  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74     60%, #e6739f 60%);
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

.top-container:before {
  content: "";
       background: url("https://i.stack.imgur.com/B9QHI.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.2;
       width: 100%;
       height: 100%;
}

<div class="top-container"></div>

背景图像不会缩放以适合页面

Background image won't scale to fit page

css

background-image

pseudo-element

background-repeat