класс имеет внутренний HTML

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

 danicotra30 окт. 2016 г., 21:01
 danicotra30 окт. 2016 г., 20:53
 Ben25 янв. 2011 г., 07:31
Вы имеете в виду, как установить непрозрачность для фона div, не затрагивая вложенные элементы?
 Bnjmn25 янв. 2011 г., 07:24
Вот ссылка на статью, в которой описан метод реализации прозрачности с использованием CSS.domedia.org/oveklykken/css-transparency.php Остерегайтесь, хотя кажется, что кросс-браузерная поддержка может быть проблемой, которая может заставить вас изменить свою реализацию.

Ответы на вопрос(8)

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

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

100x100 и т. Д. Все, что имеет смысл на вашей странице. (Я использовал PNG размером 200x200, и он занимал всего 0,25 КБ, поэтому здесь нет особого значения для размера файла.)

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

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

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

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

 jurchiks23 февр. 2015 г., 16:16
Размер PNG только потому, что ваш инструмент настолько дрянной, что не поддерживает его? В самом деле...

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

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

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}
 Tarun25 янв. 2011 г., 09:49
это сделает содержимое с непрозрачностью 50%.
 Tim Cooke13 сент. 2016 г., 04:34
Это легко исправить с помощью css:.transparent * { opacity:1; }, если, например, элемент сtransparent класс имеет внутренний HTML

Использование 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>

Хорошо знать

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

Запись

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

 manmal17 дек. 2014 г., 09:16
@ Thalatta да, просто попробуй.
 Thalatta15 дек. 2014 г., 21:00
@manmal, но где вы положили IE исправить? Прямо в файле сайта .css?
 manmal01 янв. 2012 г., 19:05
IE6 поддерживает PNG, даже прозрачные: filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (enabled = true, sizingMethod = scale, src = '/ filename.png');
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 
}

 iBug31 янв. 2018 г., 08:29
Спасибо за этот фрагмент кода, который может оказать некоторую ограниченную, немедленную помощь.правильное объяснение значительно улучшит его долгосрочную ценность показываяПочему Это хорошее решение проблемы, и оно сделает его более полезным для будущих читателей с другими, похожими вопросами. пожалуйстаредактировать Ваш ответ, чтобы добавить некоторые объяснения, в том числе предположения, которые вы сделали.
Решение Вопроса

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

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

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

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

 Tarun27 янв. 2011 г., 06:23
да, IE поддерживает rgba, его синтаксис #ARGB и записывается в виде фильтра: progid: DXImageTransform.Microsoft.gradient (startColorstr = # AARRGGBBAA, endColorstr = # AARRGGBBAA); это в основном градиент статического цвета, но с прозрачностью.
 Pum Walters26 дек. 2012 г., 12:30
У меня не работает ни в Chrome, ни в сафари
 lisovaccaro25 янв. 2011 г., 18:42
Спасибо, это работает в любом браузере?

Ваш ответ на вопрос