Как изменить непрозрачность цвета фона в CSS

Question

У меня есть файл PNG, который я даю цвет фона в его прозрачные области, но я хотел бы сделать цвет фона немного прозрачным, как непрозрачность. Вот мой код до сих пор:

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
} 

Answer 1

background: rgba(0,0,0,.5); 

вы можете использовать RGBA для непрозрачности, будет работать только в IE9 + и лучшие браузеры

Answer 2

Использование RGBA так: background-color: rgba(255, 0, 0, .5)

Answer 3

Используйте RGB значения в сочетании с непрозрачность, чтобы получить прозрачность, которую вы хотите.

Например,

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div> 

Аналогично, с фактическими значениями без непрозрачности, даст ниже.

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div> 
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div> 
<div style=" background: rgb(249, 95 , 94) ; ">&nbsp;</div> 
<div style=" background: rgb(252, 47, 47) ; ">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0)  ; ">&nbsp;</div> 

Вы можете посмотреть на это WORKING EXAMPLE.

Теперь,, если мы специально нацелим вашу проблему, вот WORKING DEMO SPECIFIC TO YOUR ISSUE.

HTML-

<div class="social"> 
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" /> 
</div> 

CSS-:

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
    cursor:pointer; 
    background: rgb(255, 0, 0) ; opacity: 0.5; 
} 

Надеется, что это помогает сейчас.

Answer 4

Не слишком уверенно добавить непрозрачность через CSS - такая хорошая идея.
Непрозрачность имеет такой забавный способ применения ко всему контенту и детям, с которых вы его устанавливаете, с неожиданными результатами в смешанных цветах.
В этом случае у него нет никакой цели, для bg-цвета, на мой взгляд.
Если вы хотите наложить на него изображение bg, то вы можете использовать несколько фонов.
этого цвета прозрачного может быть применено с помощью дополнительной повторной PNG (или нет с фоном-положением),
CSS градиент (лучевые) линейных градиент с RGBA цветами (начиная и заканчивая же цветом) может достичь это также. Они рассматриваются как фоновое изображение и могут использоваться в качестве фильтра.
Идем для текста, если вы хотите, чтобы они были немного прозрачными, используйте rgba (хорошо, чтобы слить текст-тень вместе).

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

Вот смешанный из RGBA, используемых для непрозрачности, если Вам интересно dabblet.com/gist/5685845

Answer 5

Использование RGBA как большинство из наиболее часто используемых браузеров поддерживает его ..

.social img:hover { 
background-color: rgba(0, 0, 0, .5) 
}