将背景大小应用于多个背景 CSS 行

Question

我想添加线性渐变和图像作为元素的背景。

我是这样操作的：

.home_description .perchas{
background:linear-gradient(140deg, rgba(28,121,192,0.85) 0%, rgba(3,137,255,0.85) 100%), url('/assets/img/perchas.jpg');
}

它按预期工作。

但是现在，如果我应用 background-size: cover; 属性，它不起作用（= 图像默认显示完整的原始大小）。

阅读此题：Apply background-size to individual layer of a multiple background

我试过了

.home_description .perchas{
background:linear-gradient(140deg, rgba(28,121,192,0.85) 0%, rgba(3,137,255,0.85) 100%), url('/assets/img/perchas.jpg') no-repeat center/cover fixed;
}

但它仍然不会应用封面尺寸（在这种情况下图像显示居中）。

Fiddle - https://jsfiddle.net/da9bm7ce/1/

的完整上下文

Answer 1

您正在设置：

background-image: <background-image-1>, <background-image-2>, ... <background-image-N>;

所以你必须设置：

background-size: <background-size-1>, <background-size-2>, ... <background-size-N>;

.perchas {
  width: 400px;
  height: 200px;
  background: linear-gradient(140deg, rgba(28, 121, 192, 0.85) 0%, rgba(3, 137, 255, 0.85) 100%), 
  url('https://via.placeholder.com/150');
  background-position: center;
  background-size: auto, cover;
}

<div class="perchas"></div>

已更新 来自您的 jsfiddle 的代码：

.home_description {
  position: relative;
  display: block;
  border: 1px solid blue;
}

.home_description h1 {
  display: block;
}

.home_description .box {
  position: relative;
  box-sizing: border-box;
  padding: 2.5rem;
  margin-bottom: 1rem;
  color: #FFF;
  background-position: center;
  background-size: auto, cover;
  display: table-cell;
  width: 24.25%;
}

.home_description .spacer {
  display: table-cell;
  width: 1%;
}

.home_description .box.perchas {
  background-image: linear-gradient(140deg, rgba(28, 121, 192, 0.85) 0%, rgba(3, 137, 255, 0.85) 100%), url('https://via.placeholder.com/150');
}

.home_description .box.bici {
  background-image: linear-gradient(140deg, rgba(28, 121, 192, 0.85) 0%, rgba(3, 137, 255, 0.85) 100%), url('https://via.placeholder.com/90');
}

<html>

<body>

  <div class="home_description">

    <h1>Whatever</h1>
    <!--

    -->
    <div class="box perchas">
      <h2>Mobiliario</h2>
      <p>Nuestros elementos.</p>
    </div>
    <div class="spacer"></div>
    <!--

    -->
    <div class="box perchas">
      <h2>Atención 24h</h2>
      <p>Con nosotros, nunca estás solo....</p>
    </div>
    <div class="spacer"></div>
    <!--

    -->
    <div class="box perchas">
      <h2>Sin gastos adicionales</h2>
      <p>Nuestros precios incluyen costes.</p>
    </div>
    <div class="spacer"></div>
    <!--

    -->
    <div class="box perchas">
      <h2>Tarjeta X</h2>
      <p>Lorem ipsumistic.</p>
    </div>
    <!--

-->
  </div>

</body>

</html>

将背景大小应用于多个背景 CSS 行

Apply background-size to multiple background CSS line

css

background-image