0

Вот макет

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

    .service_thumb {
        width: 100%;
        height: 555px;
        margin: 15px;
        overflow: hidden;
        position: relative;
    }
    
    .service_thumb:before {
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.81) 0%, rgba(0,0,0,0) 100%);
        background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.81) 0%,rgba(0,0,0,0) 100%);
        background: linear-gradient(45deg,  rgba(0,0,0,0.81) 0%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf000000', endColorstr='#00000000',GradientType=1 );
    }
    
    .service_thumb img {
        display: block;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    <div class="service_thumb">
       <img src="img/images/img_05.jpg" alt="" />
    </div>

Не получается сделать правильно подложку с полупрозрачным градиентом над картинкой. Как его сделать?

1
  • В чём именно проблема?
    – UModeL
    26 дек 2020 в 5:49

1 ответ 1

3

а в чем проблема то? у вас рабочий код

вот его минималистическая версия:

.service_thumb {
        width: 200px;
        overflow: hidden;
        position: relative;
    }
    
    .service_thumb:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        background: linear-gradient(45deg,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.0) 100%);
    }
    
    .service_thumb img {
      width: 100%;
    }
<div class="service_thumb">
       <img src="https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg" alt="" />
    </div>

ну разве что угол можно скорректировать относительно размеров изображения - не 45deg, а скажем 30deg

3
  • кто то минусит тебя постоянно - у тебя есть враг ? 26 дек 2020 в 11:17
  • @MaximLensky: я вот думаю, тоже минусануть, что ли?.. И вопрос и ответ.
    – UModeL
    26 дек 2020 в 12:52
  • надо только знать кто это делает - спроси того кто имеет доступ к аналитике 26 дек 2020 в 14:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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