logo标签列表

如何在不影响子元素的情况下应用不透明度，使用HTML/CSS？

htmlcssopacity
71
我希望使用 HTML 和 CSS 实现以下效果：

schema

我已经尝试将容器的不透明度设置为0.3，而将盒子的不透明度设置为1，但是它没有起作用：两个div都具有0.3的不透明度。

这里是我尝试的jsFiddle链接

我想要实现的效果是一个弹出框位于页面顶部。通过降低下面内容的不透明度来突出显示它。

可能是CSS - 不透明文本在低不透明度div上？的重复问题。 - Félix Adriyel Gagnon-Grenier
@FélixGagnon-Grenier 我认为这个解决方案不会对 OP 有益，因为他可能也想要淡化内容。 - xpy
12个回答
108

你可以将不透明度与背景颜色结合使用，如下所示：

#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);
}
<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​演示

这个回答非常好。不过，您能否提供一些关于该方法与浏览器兼容性的细节？ - Sparky
4
@Sparky，这是链接 http://caniuse.com/#search=rgba ~ 在撰写本文时，该功能在浏览器上的支持率为85.51%。 - schalkneethling
6
这并不是一个真正的答案。它实际上并没有改变透明度，而是改变了背景颜色。 - NonameSL
ie8不支持rgba()。 - WantToDo
这应该是被接受的答案，它是最简单和最有效的。如果你的目标不同，它可以很容易地用 color: 替换 background-color:。 - Jake
显示剩余2条评论
22
据我所知，您不能简单地完成此操作。这里有几个选项：

  1. Use absolute positioning to position box "inside" the container.

    #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;
}
    <div id="container"></div>
<div id="box">
    <p>Something in here</p>
</div>

  2. Use Javascript - almost the same as above, but position and size don't have to be hardcoded.

2
只是提醒一下，我认为编号有点不对。 - Whymarrh
24
这不是一个解决方案，因为该盒子不再是容器的子元素。 - Griffin
1
另一个选择可能是使用jQuery UI对话框（http://jqueryui.com/demos/dialog） - Ilia Frenkel
1
@NishantPatel 我已经提供了一个可能的解决方案来解决这个问题。接受或拒绝该解决方案取决于问题的原始作者。此外，那是8年前的事情！自那时以来，网络发生了很多变化 :-) - Ilia Frenkel
@我同意这是一个相当古老的帖子。 - Nishant Patel
显示剩余2条评论
10

如果您使用不透明度属性，将会影响到子元素！

"不透明度属性应用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景具有相同的不透明度，即使它们相互之间具有不同的不透明度... 如果您不想将不透明度应用于子元素，请改用background属性。" https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

如果您只想将不透明度应用于背景，而不影响子元素，请使用：

background-color: rgba(255, 255, 255, .3)

然而，如果您将它们放在一个div父元素中并使用CSS position属性，您可以实现所需的效果： 

.parent {
  border: solid green 3px;
  position: relative;
  width: 400px;
  height: 200px;
}

.sibling-one {
  border: solid red 3px;
  position: absolute;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  opacity: .3;
 }

.sibling-two {
    border: solid blue 1px;
    margin: 10px;
    width: 200px;
    height: 100px;
    position: absolute;
    transform: translateY(50%);
}  
<div class="parent">
  <div class="sibling-one">
  <p>A sibling's one element</p>
</div>
<div class="sibling-two">
    <p>A sibling's two element</p>
</div>
</div>

8

使用 background-color: rgba(#777788, 0.3); 而不是 opacity 可能可以解决问题。

3
rgba没有这种语法，但是应该写成rgba(255,0,0,0.3);。 - DaFois
@DaFois 是正确的，但这个答案确实解决了我的问题。 - FllnAngl
7

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

这个答案更好，因为它保留了级联。 - Stef Geysels
IE11也兼容！ - Melvin Roest
2
应用此 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/

@Bojangles，请再次阅读原帖... 原帖_只_想要一个透明的背景，而这个答案虽然有点粗糙，但提供了一个很好的解决方法链接。 - Sparky
2

不管嵌套了什么元素，透明度始终会被子元素继承，至今没有任何解决方法。如果不能将子元素移出透明背景，例如在创建弹出式菜单/对话框时，使用带有rgba的背景是解决方案。

这是我创建的一个输入框，可以通过JavaScript的类属性“invisible”打开或关闭。

<div id="blackout" class="invisible">
    <div id="middlebox">
        <p>Enter the field name: </p>
        <input type="text" id="fieldvalue" />
        <input type="button" value="OK" id="addfname" />
    </div>
</div>

CSS

#blackout {
    z-index: 9999;
    background: rgba(200, 200, 200, 0.6); 
    height: 100%;
    width: 100%;
    display: block;
    padding: 0px;
    clear: both;
    float: left;
    position: absolute;
    margin-top: -10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -10px;
}

#blackout #middlebox {
    border: thick solid #333;
    margin: 0px;
    height: 150px;
    width: 300px;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px 50px 0px 50px;

}

#middlebox p {
    float: left;
    width:100%;
    clear:both;
}

#middlebox input {
    clear:both;
    margin-bottom:10px;
}

#middlebox input[type=text]{
    width:100%;
}

#middlebox input[type=button]{
    float:right;
    width:30%;
}

.invisible{
    visibility:hidden !important;
}
2
使用可以添加:before或:after的元素。我的解决方案
<div class="container">
    <div>
         Inside of container element is not effected by opacity. 
    </div>
</div>

Css.

.container{
    position: relative;
}

.container::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: .25
}
1
另一个解决方法是使用叠加背景来创建类似的效果。我个人喜欢黑色叠加层，透明度约为65%，但对于你想要做的事情，你可能需要使用白色叠加层，透明度大约为70%。在Photoshop或GIMP中创建一个小的（100 x 100或更小）PNG，具有所需的颜色和透明度，然后将其设置为您的灯箱的背景。如果您创建多个具有不同透明度的PNG，则可以使用JS轻松地在它们之间切换，或通过后端脚本在加载时动态切换。虽然这不是你试图做的技术上的解决方案，但在美学上它可以产生非常相似的效果，并且在UX方面实现了相同的目标。它也非常容易做到，并且在几乎所有平台上都得到广泛支持。
1
任何设置了不透明度的元素的子元素都会继承该不透明度。
要实现这种样式，您可以使用rgba颜色和IE的滤镜作为背景，并在文本元素上使用不透明度。只要第二个框不是文本元素的子元素，它就不会继承不透明度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接