Прозрачный фон div, с оттенком цвета?

Question

Может кто-нибудь сказать мне, как сделать фон div прозрачным, но с оттенком цвета, таким как черный.Я пробовал это с помощью CSS, хотя я могу только сделать div прозрачным или заполненным цветом.

Answer 1

Существует еще одна опция (хотя поддерживается не во всех браузерах).Используйте rgba ():

/* apply a shade of seafoam green (50% transparent) to "tinted" class */
.tinted {    
    background-color: rgba(129,254,188,0.5);
}

Вот хорошая легкая для чтения статья о нескольких методах.

Все намного проще, если вам все равноо IE6.

Answer 2

В ответе Пекки есть opacity, но это сделает содержимое div прозрачным, а также фон. Если это не то, что вы хотите, вы можете:

1. имеет два элемента div, один с непрозрачностью / альфа-каналом в качестве фона, а другой сплошной для содержимого, расположенного поверх него. Однако позиционирование может быть сложным для элементов переменного размера. Или

2. используйте полупрозрачный фон, используя rgba() color (в браузерах, отличных от IE), или фоновое изображение PNG с альфа-каналом (который работает в IE7- 8, но нуждается в исправлении AlphaImageLoader для IE6, что также означает, что вы должны сделать изображение настолько большим, насколько это возможно, так как AlphaImageLoader не будет отображаться в виде мозаики).

Answer 3

Для этого вы можете использовать opacity (и его родственник IE alpha).

Quirksmode.org содержит хороший список того, как добиться этого последовательно в большинстве браузеров.

Answer 4

Или вы можете использовать полупрозрачное изображение PNG. Часто самый простой выход, потому что при игре с opacity вы также изменяете непрозрачность текста.

Answer 5

http://www.w3schools.com/Css/css_image_transparency.asp имеет несколько примеров

Answer 6

Вот плагин jQuery, который будет обрабатывать все для вас, Transify http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background

Время от времени я сталкивался с этой проблемой, поэтому решил написать что-то, что облегчит жизнь. Сценарий менее 2 КБ, для его работы требуется всего 1 строка кода, а также он будет обрабатывать анимацию прозрачности фона, если хотите.