0

我试图让这个背景图像重新应用以覆盖 div 容器。我希望它保持相同的大小，这样当屏幕比例发生变化时它就不会“放大”。但是，目前，它只是放大而不是保持相同的大小：

.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。但不是这样做，它只是放大，这会扭曲图像。

4

1 回答 1

0

有几个问题，头骨没有重复，它覆盖了整个 div，这意味着它看起来“模糊”，因为它基本上是一个小图像。另外，请注意 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>

于 2020-12-12T14:36:50.040 回答