Непрозрачность только на Img не его фоне

я это img:Непрозрачность только на Img не его фоне

<img src="img1.png" alt="" />

и это CSS:

img{ 
    background-color:green; 
    opacity:0.4; 
    padding:5px; 
}

вы можете увидеть, что herebackground-color также утрачен img «s. Как я могу дать opacity только img и не до его background?

источник

2013-07-17 Majid Rahimi

Боюсь, что вам придется открыться для более радикальных изменений. Canvas может сделать, добавление родительского элемента может сделать или применить фильтр на стороне сервера изображений. Скорее всего, вы действительно можете делать именно то, что хотите, с фильтрами IE. –

Непрозрачность устанавливает прозрачность для элемента img, в котором применен фоновый цвет. Так что это тоже прозрачно. Вам нужен другой элемент HTML с фоновым цветом позади изображения. –

Fiddle

Вам нужен другой окружающий HTML-элемент для достижения этого эффекта.

HTML:

<div class="wrapper"> 
    <img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" /> 
</div>

CSS:

img { 
    opacity: 0.4; 
    padding: 5px; 
} 

.wrapper { 
    font-size: 0; 
    display: inline-block; 
    background-color: green; 
}

Установка display для inline-block обертывания img, без указания любого размера.

источник

2013-07-17 10:46:42

Я хочу, чтобы 'img' исчез до белого –

@majidgeek Это не то, что означает непрозрачность. Непрозрачность заставит вас посмотреть, и вы начнете видеть цвет позади него. Положите белый, если хотите белый. –

@majidgeek В чем смысл зеленого цвета фона? Каков результат, которого вы хотите достичь? –

Непрозрачность только на Img не его фоне

ответ

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