Блог

Я сделал несколько поисковых запросов в Google для этого, и есть много различных примеров, некоторые устаревшие, некоторые нет.

Я также взглянул на пример внизу на http://www.w3schools.com/Css/css_image_transparency.asp это похоже на то, чего я хочу достичь. В приведенном примере текст в div также немного прозрачен, но его трудно разглядеть, потому что это черный текст на белом div.

У меня есть фоновое изображение с большим количеством черных элементов и, кроме того, черный div с непрозрачностью 55%, когда я добавляю белый текст поверх этого, некоторые из очень темных элементов на фоновом изображении слегка видны сквозь белый текст, который мне не нужен.

У кого-нибудь есть недавний пример / рекомендации по тому, как этого добиться (с помощью прозрачного png или css)? Он не должен поддерживать IE 6..

Заранее спасибо.

Милан почти прав. Вы захотите сделать фон прозрачного div прозрачным с помощью RGB. Для черных это было бы (0,0,0). Чтобы добавить прозрачность, вы просто добавляете десятичную дробь (аналогично ‘opacity: .55’ для CSS; таким образом, чтобы получить 55% непрозрачного черного фона, вы должны использовать

 background: rgba(0,0,0,0.55);
 

Итак, чтобы создать пример div с фоном непрозрачности 55% с белым текстом, используйте:

 .blackopaque {
  background:rbga(0,0,0,0.55);
  color:#ffffff;
}
 

«Фон» изменяет фон, а цвет изменяет цвет текста (в данном случае белый).
Надеюсь, это поможет!
Мэтт

РЕДАКТИРОВАТЬ: поддержка IE Добавить поддержку в IE легко, все, что вам нужно сделать, это специально настроить пользователей IE с их собственной таблицей стилей для этого элемента. Откройте заголовочный файл вашей темы, допустим, у вас есть таблица стилей, разработанная специально для IE с прозрачным PNG, чтобы получить эффект прозрачного черного цвета с именем IE.css. Вы бы хотели вставить этот код под существующим включением CSS:

 <!--[if IE]>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/IE.css" />
<![endif]-->
 

Эта условная таблица стилей становится доступной только для пользователей IE, поэтому остальные, кхм, более продвинутые браузеры могут пользоваться RGBa.

Для таблицы стилей IE вам нужно что-то вроде этого:

 .blackopaque {
background:url('*link to your 55% opaque png file*')
color:#ffffff;
}
 

ОБРАТИТЕ внимание, что вам нужно будет включить только одно это правило в таблицу стилей IE, просто чтобы оно переопределяло правило по умолчанию для этого фона.

RGBA не поддерживается до IE9, поэтому лучше всего, если вам нужно поддерживать более ранние версии IE, — это просто полупрозрачный PNG.

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

 #content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(your_image.jpg);
   opacity:0.7;
}