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

Question

Мне нужно сделать белый фон 50% прозрачным, не затрагивая ничего другого. Как мне это сделать?

Answer 1

Использование rgba():

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

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

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

Answer 2

Попробуйте это:

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

Answer 3

Хорошо знать

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

Примечание

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

Answer 4

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

Хотя датированный, не один ответ на эту тему можно использовать повсеместно. Использование 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>

Answer 8

div.main{ 
    width:100%; 
    height:550px; 
    background: url('https://images.unsplash.com/photo-1503135935062- 
    b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat; 
    background-position:center; 
    background-size:cover 
} 
div.main>div{ 
    width:100px; 
    height:320px; 
    background:transparent; 
    background-attachment:fixed; 
    border-top:25px solid orange; 
    border-left:120px solid orange; 
    border-bottom:25px solid orange; 
    border-right:10px solid orange; 
    margin-left:150px 
}