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

Я хочу достичь этого с помощью html и css:

schema

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

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

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

33
css html opacity

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>
  1. используйте Javascript-почти то же самое, что и выше, но позиция и размер не должны быть жестко закодированы.
19

привет вы можете использовать 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>

Live demo http://jsfiddle.net/rohitazad/yT6nG/29/

63

попробуйте использовать 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>

см. рабочий codepen здесь

3

применить это правило 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)"; 
}

в дополнение к этому вы должны объявить background: transparent для веб-браузеров IE.

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

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

2

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

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

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

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

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

1

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

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

0

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

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

0

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

0