Примените background-size к нескольким фоновым CSS-строкам - PullRequest
Новая
       7

Примените background-size к нескольким фоновым CSS-строкам

0 голосов
/ 24 января 2019

Я хочу добавить линейный градиент и изображение в качестве фона для элемента.

Я делаю это следующим образом: 

.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;, оно не работает (= изображение отображается по умолчанию в полном оригинальном размере).

Чтение этого вопроса: Примените фоновый размер к отдельному слоюмногократный фон

Я пытался 

.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/

1 Ответ

0 голосов
/ 24 января 2019

Вы устанавливаете: 

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>
...