Question

我正在尝试使红色渐变适用于背景图像。有一个初始后备图像，然后将其附加到下一个背景图像：, linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));-为什么不应用渐变？

* {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
  font-size: 100%;
  box-sizing: border-box;
}

.sadLeader {
  width: 1088px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

  
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
  font-size: 46px;
  line-height: 56px;
  font-weight: 400;
}
.sadLeader p {
  font-size: 25px;
  line-height: 28px;
  margin: 25px 0;
}
.sadLeader span {
  background: red;
  display: flex;
}
.sadLeader span button {
  color: #000;
  background-color: #fff;
  transition: all 0.3s ease;
  font-size: 15px;
  height: 55px;
  padding: 0 36px;
  border: none;
}

@media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}

@media (max-width: 767px) {
  .sadLeader span { flex-direction: column }
  .sadLeader span button:nth-of-type(2) { margin-top: 5% }
}

<div class="sadLeader">
  <h3>Some text</h3>
  <p>Some more text to go here</p>
  <span>
    <button>Button 1</button>
    <button>Another button here...</button>
  </span>
</div>

Answer 1

* {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', verdana, helvetica, arial, sans-serif;
  font-size: 100%;
  box-sizing: border-box;
}

.sadLeader {
  width: 1088px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
  /* fallback */
  background-image: linear-gradient(#eb01a5, #d13531), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(221, 51, 51, 0.8)), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
}

.sadLeader h3 {
  font-size: 46px;
  line-height: 56px;
  font-weight: 400;
}

.sadLeader p {
  font-size: 25px;
  line-height: 28px;
  margin: 25px 0;
}

.sadLeader span {
  background: red;
  display: flex;
}

.sadLeader span button {
  color: #000;
  background-color: #fff;
  transition: all 0.3s ease;
  font-size: 15px;
  height: 55px;
  padding: 0 36px;
  border: none;
}

@media (min-width: 768px) {
  .sadLeader span button:nth-of-type(2) {
    margin-left: 5%
  }
}

@media (max-width: 767px) {
  .sadLeader span {
    flex-direction: column
  }
  .sadLeader span button:nth-of-type(2) {
    margin-top: 5%
  }
}

<div class="sadLeader">
  <h3>Some text</h3>
  <p>Some more text to go here</p>
  <span>
    <button>Button 1</button>
    <button>Another button here...</button>
  </span>
</div>

这是你的追求吗？

Answer 2

您的背景图像覆盖了整个容器（background-size: cover;），因此渐变将不可见。如果图像较小但未覆盖容器，则图像周围将可见。要仅将图像作为备用，请按以下说明进行标记。

* {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
  font-size: 100%;
  box-sizing: border-box;
}

.sadLeader {
  width: 1088px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

  
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
  background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
  background-image: linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
  font-size: 46px;
  line-height: 56px;
  font-weight: 400;
}
.sadLeader p {
  font-size: 25px;
  line-height: 28px;
  margin: 25px 0;
}
.sadLeader span {
  background: red;
  display: flex;
}
.sadLeader span button {
  color: #000;
  background-color: #fff;
  transition: all 0.3s ease;
  font-size: 15px;
  height: 55px;
  padding: 0 36px;
  border: none;
}

@media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}

@media (max-width: 767px) {
  .sadLeader span { flex-direction: column }
  .sadLeader span button:nth-of-type(2) { margin-top: 5% }
}

<div class="sadLeader">
  <h3>Some text</h3>
  <p>Some more text to go here</p>
  <span>
    <button>Button 1</button>
    <button>Another button here...</button>
  </span>
</div>

背景渐变不适用

2 个答案: