2

Всем привет, первый раз делаю градиент в CSS и не особо получается. Если кто знает как решить проблему помогите пожалуйста) (браузер хром)

.special-article {   
background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) -2.9%, rgba(53, 65, 83, 0) 65.7%);
background-image: url('../image/jpg/255.jpg');
}

вот что должно получится result

3 ответа 3

3

Если я правильно понял, есть такая реализация:

.content {
    display: inline-block;
    position: relative;    
    line-height: 0;
}
.content:after {
    content: "";
    display: block;    
    width: 100%;
    height: 100%;    
    position: absolute;
    top: 0;      
    left: 0;   
    background: transparent;
    background-image: linear-gradient(to left, red, yellow);
    opacity: 0.4;
}
<div class="content">
      <img src="https://n1s1.elle.ru/48/7b/36/487b36300c62c5f0cb905da52aa874b4/728x486_1_30b570c2f6c0da65bb56095068e05768@940x627_0xc0a839a4_18087198581488362059.jpeg" alt="">
 </div>
<!-- Оригинальная картинка -->
<img src="https://n1s1.elle.ru/48/7b/36/487b36300c62c5f0cb905da52aa874b4/728x486_1_30b570c2f6c0da65bb56095068e05768@940x627_0xc0a839a4_18087198581488362059.jpeg" alt="">

2

Градиент в CSS это по сути изображение, следовательно оно идёт в свойстве background-image, и когда вы пишите background: gradient, а потом background-image: image, то по сути градиент image встанет вместо gradient.

Но если вы ставите картинку через background-image, то можете туда же добавить и градиент, ибо background "поддерживает" слои.

.bg-layouts {
  width: 350px;
  height: 175px;
  border-radius: 10px;
  background-color: #ccc;
  background-image: 
    linear-gradient(90deg, rgba(255,130,53,.75), rgba(48,232,191,0)), /* слой 1 */
    url(//i.imgur.com/brikCeG.png); /* слой 0 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
<div class="bg-layouts"></div>

1

Если вам не принципиально вставлять картинку через css, то вот как вариант(наверное, не самый лучший, но всё же).

.special-article img {
  position: relative;
}

.gradient {
  position: absolute;
  background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) -2.9%, rgba(53, 65, 83, 0) 65.7%);
  width: 700px;
  height: 350px;
  top: 10px;
}
<div class="special-article">
  <img src="//i.imgur.com/Wsvz9ML.png" alt="" width="604" height="377">
  <div class="gradient"></div>
</div>

Не знаю, как в код вставить сюда картинку, но вот скрин, как получилось у меня

введите сюда описание изображения

2
  • Картинку в сниппет можно добавить двумя способами: 1. вставить её в вопрос, взять ссылку и добавить в сниппет; 2. загрузить на imgur и скопировать ссылку оттуда.
    – De.Minov
    6 мая 2022 в 4:32
  • Насчёт решения, есть проблема, надо .special-article установить position: relative и тогда .gradient можно выставить width: 100%; height: 100%; position: absolute; left: 0; top: 0;, и .gradient будет позиционироваться относительно родителя.
    – De.Minov
    6 мая 2022 в 4:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.