CSS：具有线性渐变的背景图像在 Safari 中显示，但在 Chrome 中不显示答案

【问题标题】：CSS: background image with linear gradient shows in Safari but not in ChromeCSS：具有线性渐变的背景图像在 Safari 中显示，但在 Chrome 中不显示
【发布时间】：2022-11-19 01:09:10
【问题描述】：

在我的项目的一部分中，我在 CSS 中设置了背景图像，在此图像上我设置了线性渐变：在 Safari 中一切正常但在 Chrome 中却不行：渐变显示正确但背景图像根本不可见，为什么？提前致谢。

HTML:

       <div class="hero-box">
        <h2 class="hero-description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facilis
          similique cupiditate temporibus excepturi, consectetur, expedita aut
          molestias fuga unde id nam doloremque laborum adipisci enim soluta ut
          nisi in! Distinctio, quibusdam
          exercitationem placeat fugiat excepturi dolore nihil! Sint saepe
          quidem voluptatum?
        </h2>
        <div class="hero-btn-container">
        <a href="#" class="hero-btn">Visit</a>
        </div>
      </div>
    </div>

CSS：


.hero {

  display: grid; 
  place-items: center;
  padding: 0;
  margin: 0;
  height: 95vh;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 33%,
      hsla(224, 62%, 29%, 0.9),
      rgba(228, 24, 27, 0.8)
    ),
    url(../Images/moscow.jpg);
  background-size: cover;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

【问题讨论】：

我在您的 html 中没有看到任何带有 class hero 的元素。请考虑检查并修复您的代码，以免有人可能重现问题

标签： html css google-chrome background-image linear-gradients

【解决方案1】：

用classhero添加了一个div并导入了一张图片。

.hero {
  display: grid; 
  place-items: center;
  padding: 0;
  margin: 0;
  height: 95vh;
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 33%,
      hsla(224, 62%, 29%, 0.9),
      rgba(228, 24, 27, 0.8)
    ),
    url(https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png);
  background-size: cover;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

    <div class="hero-box">
        <h2 class="hero-description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facilis
          similique cupiditate temporibus excepturi, consectetur, expedita aut
          molestias fuga unde id nam doloremque laborum adipisci enim soluta ut
          nisi in! Distinctio, quibusdam
          exercitationem placeat fugiat excepturi dolore nihil! Sint saepe
          quidem voluptatum?
        </h2>
        <div class="hero-btn-container">
        <a href="#" class="hero-btn">Visit</a>
        </div>
      </div>
      <div class="hero"></div>
    </div>

【讨论】：