Наложение цвета над HTML img

Я застрял в стилизации HTML-изображения(). Я не могу найти способ добавления белого наложения поверх изображения. Я пробовал это - CSS background image on top of <img> (Не работает).Наложение цвета над HTML img

HTML

<img class="default-user" src="https://minotar.net/helm/Steve/16.png">

CSS

.default-user { 
    position: absolute; 
    outline: #e8e8e8 solid 1px; 
    -webkit-filter: grayscale(50%); 
    filter: grayscale(50%); 
}

Есть ли способ, чтобы добавить наложение? Спасибо за помощь!

источник

2016-09-02 Berisko

Вы хотите добавить прозрачный оверлей на img? – MoolsBytheway

проверить это jsFiddle https://jsfiddle.net/MoolsBytheway/s1t0tmev/ – MoolsBytheway

Попробуйте jsFiddle

.default-user { 
 
    position: absolute; 
 
    outline: #e8e8e8 solid 1px; 
 
    -webkit-filter: grayscale(50%); 
 
    filter: grayscale(50%); 
 
    width:150px;height:150px; 
 
} 
 
    
 
#overlay { 
 
    padding:10px; 
 
    position:absolute; 
 
    background-color:white; 
 
    opacity:0.5; /* -> transparency 50% */ 
 
    height:130px; /* -> image_height - padding */ 
 
    width:130px; /* -> image_width - padding */ 
 
    z-index:1;  /* -> put overlay over image */ 
 
}

<div class=container> 
 
    <div id=overlay>Overlay text</div> 
 
    <img class="default-user" src="https://minotar.net/helm/Steve/16.png"> 
 
</div>

источник

2016-09-02 16:05:04 MoolsBytheway

Спасибо! Это было легко исправить. Возьмите печенье! ;) – Berisko

mmmmmmm, Yummy! – MoolsBytheway

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

Ответ здесь о том, как применить наложение к Б.Г. изображения: Overlay a background-image with an rgba background-color

источник

2016-09-02 15:41:49 TFFX

Если вы можете перестроить свой HTML, вы должны обернуть img в div, так что вы можете использовать элемент :after псевдо. Нанесите фоновый стиль, что и он должен сидеть аккуратно на верхней части изображения (а изображение может быть любого размера, и вы не должны указывать размер в CSS в любом месте.)

.default-user { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.default-user:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(255, 255, 255, 0.7); 
 
}

<div class="default-user"> 
 
    <img src="https://placekitten.com/200/300"> 
 
</div>

источник

2016-09-02 15:47:17 ksav

Попробуйте этот код.

<div class="image"></div> 

.image { 
width: 300px; 
height: 200px; 


background: 
/* top, transparent red * 
linear-gradient( 
rgba(255, 0, 0, 0.45), 
rgba(255, 0, 0, 0.45), 
), 
/* bottom, image */ 
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); 
}

источник

2016-09-02 16:29:05

.default-user { 
 
\t height: 280px; 
 
\t width: 280px; 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
    background: linear-gradient(#000 0%, #fff 100%); 
 
}

<div class="grad"> 
 
    <img class="default-user"    src="http://i1.wp.com/freepngimages.com/wp-content/uploads/2015/10/cobra-snake-transparent-image.png?resize=624%2C557"  width="300px" height="300px"> 
 
</div>

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

источник

2016-09-02 16:31:56 Ricky

Наложение цвета над HTML img

ответ

Смежные вопросы