Как применить прозрачность, не затрагивая дочерний элемент с html / css?

Я хочу добиться этого с помощью HTML и CSS:

schema

Я попытался установить непрозрачность контейнера равной 0,3, а поле равным 1, но это не работает: оба элемента имеют непрозрачность 0,3.

jsFiddle моей попытки здесь

Эффект, которого я пытаюсь достичь, это всплывающее окно, которое появляется в верхней части страницы. Это выделяется уменьшением содержимого ниже (уменьшением непрозрачности).

 xpy22 мар. 2016 г., 08:51
@ F & # xE9; lixGagnon-Grenier Я не думаю, что это решение пойдет на пользу OP, поскольку он, вероятно, тоже захочет скрыть контент.
 Félix Gagnon-Grenier22 мар. 2016 г., 02:07
Возможный дубликатCSS - Opaque text on low opacity div?

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

Решение Вопроса

Насколько я знаю, вы не можете сделать это простым способом. Здесь есть несколько вариантов: 1. Используйте абсолютное позиционирование для позиционирования поля «внутри». контейнер.

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #container {
                opacity: 0.3;
                background-color: #777788;
                position: absolute;
                top: 100px;
                left: 100px;
                height: 150px;
                width: 300px;
            }
            #box {
                opacity: 1;
                background-color: #ffffff;
                position: absolute;
                top: 110px;
                left: 110px;
                height: 130px;
                width: 270px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="box">
            <p>Something in here</p>
        </div>
    </body>
</html>
Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
 05 апр. 2012 г., 03:03
Это не решение, поскольку поле больше не является дочерним элементом контейнера.
 05 апр. 2012 г., 03:10
Другим вариантом может быть использование jQuery UI Dialog (jqueryui.com/demos/dialog)
 05 апр. 2012 г., 03:03
Просто к твоему сведению, я думаю, что нумерация не в порядке.
 14 мая 2012 г., 23:04
Илья, есть ли у вас какие-либо ссылки, чтобы дать подсказку об использовании javascript для этого? У меня есть 50% непрозрачных родительских изображений, содержащих дочерние изображения, которые я хочу, чтобы 100% непрозрачных. Установка тега & lt; li & gt; вposition:relative; & Амп; img toposition:absolute; НЕ позволяет мне переопределить унаследованную непрозрачность на img, и я не могу использовать абсолютное позиционирование для самих себя (это беспорядок ;-). В JavaScript я попробовалimgs[i].style.opacity = '1';, но это также не работает, чтобы переопределить унаследованную непрозрачность. Если я правильно понимаю, я также не могу использовать rgba, потому что мне нужно влиять на изображение, а не только на цвет.

Любой дочерний элемент элемента с установленной непрозрачностью будет иметь эту непрозрачность.

Чтобы достичь этого стиля, вы можете использовать цвета и фильтры rgba для IE для фона и прозрачность текстовых элементов. Пока второе поле не является дочерним по отношению к одному из текстовых элементов, оно не будет наследовать непрозрачность.

Возможно, это не самый обычный метод, но вы можете использовать небольшое полупрозрачное фоновое изображение для каждого повторяющегося элемента div / контейнера. Похоже, что в наши дни вы сможете достичь этого в чистом (простом, не хакерском) CSS без js, но, как показывают ответы выше, это не так просто ...

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

Привет, вы можете использовать opicity с цветом фона, как это

css

#container {
  border: solid gold 1px;   
  width: 400px;
  height: 200px;
   background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
      background:rgba(205,206,255,0.1);
}

HTML

<div id="container">
containter text
<div id="box">
    box text
</div>
</div>

& # x200B; Демонстрация в реальном времениhttp://jsfiddle.net/rohitazad/yT6nG/29/

 31 мар. 2013 г., 01:09
Этот ответ действительно хорош. Однако можете ли вы предоставить некоторые сведения о совместимости браузера с этим методом?
 29 апр. 2015 г., 16:58
ты человек.
 04 нояб. 2013 г., 12:51
@Sparky Вот, пожалуйстаcaniuse.com/#search=rgba ~ На момент написания статьи поддержка 85,51% браузеров.
 12 окт. 2016 г., 22:41
Это не совсем ответ. Это на самом деле не меняет непрозрачность, оно меняет цвет фона.
 08 июл. 2016 г., 14:42
не работает в Chrome для разных альфа

Применить это правило CSS

.alpha60 { 

/* Fallback for web browsers that doesn't support RGBa */ 

background: rgb(0, 0, 0); 

/* RGBa with 0.6 opacity */ 

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

/* For IE 5.5 - 7*/ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,      endColorstr=#99000000); 

/* For IE 8*/ 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000)"; 
}

В дополнение к этому, вы должны объявить фон: прозрачный для веб-браузеров IE.

Для более подробной информации посетите следующую ссылку:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

 09 мая 2018 г., 09:54
rgba имеет не этот синтаксис, ноrgba(255,0,0,0.3);
 17 сент. 2018 г., 11:53
@ DaFois правильный, но ответ решил мою проблему.
 31 мар. 2013 г., 01:15
@ Bojangles, пожалуйста, прочитайте ОП снова ... ОПonly хочет прозрачный фон, и этот ответ, хотя и немного небрежный, дает ссылку на отличный обходной путь.

Попробуйте использовать rgba в качестве «предварительного содержимого»; Наложение на ваш образ, это хороший способ, чтобы держать вещи реагировать и ни один из других элементов, которые будут затронуты.

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}
<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Смотрите рабочий кодекс здесь

 05 мар. 2018 г., 17:29
Этот ответ лучше, поскольку он сохраняет каскад

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

Лично мне нравится черный наложение с непрозрачностью около 65%, но для того, что вы пытаетесь сделать, вы можете использовать белое наложение на уровне около 70%.

Создайте небольшой (100 x 100 или менее) PNG в Photoshop или GIMP, который имеет нужный вам цвет и непрозрачность. Затем просто установите это как фон вашего лайтбокса.

Если вы создаете несколько PNG-файлов с разной прозрачностью, вы можете легко переключаться между ними с помощью JS или динамически при загрузке с помощью серверных сценариев.

Технически это не то, что вы пытаетесь сделать, но эстетически это может дать очень похожий эффект, и UX мудро выполняет то же самое. Это также очень легко сделать, и широко поддерживается практически во всем.

С помощьюbackground-color: rgba(#777788, 0.3); вместо непрозрачности может решить проблему.

 17 сент. 2018 г., 11:53
@ DaFois правильный, но ответ решил мою проблему.
 09 мая 2018 г., 09:54
rgba имеет не этот синтаксис, ноrgba(255,0,0,0.3);

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