如何应用不透明度而不影响html / css的子元素？

I want to achieve this using html and css:

我想用html和css实现这个目的：

I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.

我试图将容器的不透明度设置为0.3，将框设置为1，但它不起作用：两个div都有0.3不透明度。

jsFiddle of my try here

我在这里尝试一下

The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).

我试图获得的效果是一个弹出框，它出现在页面顶部。它通过淡化下面的内容（通过降低不透明度）来突出显示。

8 个解决方案

#1

As far as I know you can't do it in a simple way. There a couple of options here: 1. Use absolute positioning to position box "inside" the container.

据我所知，你不能以一种简单的方式做到这一点。这里有几个选项：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.
使用Javascript - 几乎与上面相同，但位置和大小不必硬编码。

#2

Hi you can used opicity with background color as like this

嗨，您可以使用背景颜色的opicity像这样

css

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

HTML

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

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

现场演示http://jsfiddle.net/rohitazad/yT6nG/29/

#3

Apply this css rule

应用此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)"; 
}

In addition to this, you have to declare background: transparent for IE web browsers.

除此之外，您还必须为IE Web浏览器声明background：transparent。

For more details visit the following link:

有关详细信息，请访问以下链接：

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

#4

Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.

尝试使用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>

See a working codepen here

在这里查看一个有效的codepen

#5

Another workaround is to simply use an overlay background to create a similar effect.

另一种解决方法是简单地使用叠加背景来创建类似的效果。

I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.

我个人喜欢黑色覆盖层，不透明度大约为65％，但是对于你想要做的事情，你可能想要在70％的圆形上使用白色覆盖层。

Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.

在Photoshop或GIMP中创建一个小的（100 x 100或更小）PNG，它具有您想要的颜色和不透明度。然后将其设置为灯箱的背景。

If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.

如果您在不同的不透明度下创建多个PNG，您可以使用JS在它们之间轻松切换，或者通过后端脚本动态加载。

It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.

从技术上讲，你不是想要做什么，但从美学角度来说，它可以产生非常相似的效果，而且明智的用户体验也可以完成同样的事情。它也很容易做到，而且几乎所有东西都得到广泛支持。

#6

Any child of an element with opacity set will take on that opacity.

具有不透明度设置的元素的任何子元素都将具有该不透明度。

To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.

要实现此样式，您可以使用rgba颜色和过滤器作为背景的IE，以及文本元素的不透明度。只要第二个框不是其中一个文本元素的子元素，它就不会继承不透明度。

#7

This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...

这可能不是最正统的方法，但您可以为每个重复的div /容器使用一个小的半透明背景图像。似乎在这个时代，你应该能够在没有js的纯粹（简单而不是hackish）css中实现这一点，但正如上面的答案显示它不是那么直接......

Using a tiled image might seem dated but will work no worries across all browsers.

使用平铺图像可能看起来过时，但不会担心所有浏览器。

#8

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.

使用background-color：rgba（＃777788,0.3）;而不是不透明度可以解决问题。

#1

As far as I know you can't do it in a simple way. There a couple of options here: 1. Use absolute positioning to position box "inside" the container.

据我所知，你不能以一种简单的方式做到这一点。这里有几个选项：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.
使用Javascript - 几乎与上面相同，但位置和大小不必硬编码。

#2

Hi you can used opicity with background color as like this

嗨，您可以使用背景颜色的opicity像这样

css

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

HTML

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

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

现场演示http://jsfiddle.net/rohitazad/yT6nG/29/

#3

Apply this css rule

应用此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)"; 
}

In addition to this, you have to declare background: transparent for IE web browsers.

除此之外，您还必须为IE Web浏览器声明background：transparent。

For more details visit the following link:

有关详细信息，请访问以下链接：

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

#4

Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.

尝试使用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>

See a working codepen here

在这里查看一个有效的codepen

#5

Another workaround is to simply use an overlay background to create a similar effect.

另一种解决方法是简单地使用叠加背景来创建类似的效果。

I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.

我个人喜欢黑色覆盖层，不透明度大约为65％，但是对于你想要做的事情，你可能想要在70％的圆形上使用白色覆盖层。

Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.

在Photoshop或GIMP中创建一个小的（100 x 100或更小）PNG，它具有您想要的颜色和不透明度。然后将其设置为灯箱的背景。

If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.

如果您在不同的不透明度下创建多个PNG，您可以使用JS在它们之间轻松切换，或者通过后端脚本动态加载。

#6

Any child of an element with opacity set will take on that opacity.

具有不透明度设置的元素的任何子元素都将具有该不透明度。

#7

Using a tiled image might seem dated but will work no worries across all browsers.

使用平铺图像可能看起来过时，但不会担心所有浏览器。

#8

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.

使用background-color：rgba（＃777788,0.3）;而不是不透明度可以解决问题。

秒客网

如何应用不透明度而不影响html / css的子元素？

8 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#1

#2

#3

#4

#5

#6

#7

#8

相关文章