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;
}

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

小提琴上的完整上下文-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行

1 个答案: