css 为什么线性梯度不适用于图像？

ruyhziif 于 2023-01-10 发布在其他

关注(0)|答案(1)|浏览(155)

我已经检查了我的代码，没有发现任何冲突的地方。把我的图片变小了（也用不同的单位测试了），注解掉了background-size属性，没有任何改变。在开发工具上没有看到任何警告或覆盖，除了线性渐变没有应用之外，一切看起来都很正常。
感谢您的帮助!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.7;
  font-weight: 400;
  color: #333;
  font-size: 16px;
  font-family: "Nunito Sans", sans-serif;
  padding: 2rem;
}

html {
  font-size: 62.5%;
}

.img {
  display: block;
  width: 100%;
  background-image: linear-gradient(to right, #38d9a9, #69db7c),
    url(../img/HIGHEST.jpg);
  background-size: cover;
  background-position: top;
}

<body>
    <header>
      <nav>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
      </nav>
      <img class="img" src="img/HIGHEST.jpg" alt="Picture of a bridge" />
      <h1 class="title">Some text..</h1>
    </header>
  </body>

css

来源：https://stackoverflow.com/questions/75040203/why-is-the-linear-gradient-not-applying-on-the-image

1条答案

按热度按时间

mctunoxg1#

我就是不明白你为什么要在照片上加背景

<style>
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.7;
  font-weight: 400;
  color: #333;
  font-size: 16px;
  font-family: "Nunito Sans", sans-serif;
  padding: 2rem;
}

html {
  font-size: 62.5%;
}

.img {
  display: block;
  width: 100%;
  background-image: 
    url(../img/HIGHEST.jpg),
    linear-gradient(to right, #38d9a9, #69db7c);
  background-size: cover;
  background-position: top;
}
</style>

<body>
    <header>
      <nav>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
        <a href="#" class="link">Some text..</a>
      </nav>
      <img class="img" src="img/HIGHEST.jpg" alt="Picture of a bridge" />
      <h1 class="title">Some text..</h1>
    </header>
  </body>

我只是交换了url（...）和linear_gradient（），图片被向前推，因为我明白你想要什么，我甚至没有注意到有一个梯度在所有）

赞(0）回复(0）举报 2023-01-10

我来回答

css 为什么线性梯度不适用于图像？

1条答案

相关问题

热门标签

最新问答