Как сделать полупрозрачный фон?

Ответ 1

Используйте rgba():

.transparent{
  background:rgba(255,255,255,0.5);
}

Это даст вам 50% непрозрачность, в то время как содержимое поля будет по-прежнему иметь непрозрачность на 100%.

Если вы используете opacity:0.5, контент будет исчезать, а также фон. Следовательно, не используйте его.

Ответ 2

Это работает, но все дочерние элементы этого класса также будут размыты, без каких-либо препятствий.

.css-class-name {
    opacity:0.8;
}

Ответ 3

НЕ используйте полупрозрачный PNG 1x1. Размер PNG до 10x10, 100x100 и т.д. Независимо от того, что имеет смысл на вашей странице. (Я использовал PNG размером 200x200, и это было всего 0,25 кб, поэтому здесь нет реальной проблемы с размером файла.)

После посещения этого сообщения я создал свою веб-страницу с 3, 1x1 PNG с различной прозрачностью.

Dreamweaver CS5 был танком. У меня были флеш-спины к DOS!!! По-видимому, в любое время, когда я пытался прокручивать, вставлять текст, в основном что-то делать, DW пыталась перезагрузить полупрозрачные области размером 1x1 пиксель за раз... YIKES!

Техническая поддержка Adobe даже не знала, в чем проблема, но сказал мне перестроить файл (кстати, он работал над их системами). Только когда я загрузил первый прозрачный PNG в файл css, который doc снова задрожал.

Затем я нашел сообщение на другом справочном сайте о сбоях PNG в Dreamweaver. Размер вашего PNG; нет недостатка в этом.

Ответ 4

Полезно знать

Некоторые веб-браузеры испытывают трудности с отображением текста с тенями поверх прозрачного фона. Затем вы можете использовать полупрозрачное изображение 1x1 PNG в качестве фона.

Примечание

Помните, что IE6 не поддерживает файлы PNG.

Ответ 5

Если вы хотите сделать прозрачный фон серым, попробуйте PLS:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Ответ 6

Хотя датированный, ни один ответ на эту тему не может использоваться повсеместно. Использование rgba для создания прозрачных масок цвета - это не совсем объясняет, как это сделать с фоновыми изображениями.

Мое решение работает для фоновых изображений или цветных фонов.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

Ответ 7

Попробуйте следующее:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}