子元素继承父级的不透明度 [英] Child element inheriting parent's opacity

问题描述

我在一个网页上工作，我想把一个按钮放在一个透明的div，显示背景图片。但是当我放置按钮，它也是透明的。如何使其不透明？

  div.background {background：url （klematis.jpg）repeat; border：2px solid black;} div.transbox {margin：30px; background-color：#ffffff; border：1px solid black;不透明度：0.6; filter：alpha（opacity = 60）; / *对于IE8和更早版本* /} div.transbox p {margin：5％; font-weight：bold; color：＃000000;}  
 
 < div class = background> < div class =transbox> < p>这是放置在透明框中的一些文本。< / p> < input type =buttonvalue =Ok> < / div>< / div>  
 

解决方案

使用 rgba（）颜色方法代替 opacity ：

  div.background {background：url（klematis.jpg）repeat; border：2px solid black;} div.transbox {margin：30px; background-color：rgba（255，255，255，0.6）; border：1px solid black;} div.transbox p {margin：5％; font-weight：bold; color：＃000000;}  
 
 < div class = background> < div class =transbox> < p>这是放置在透明框中的一些文本。< / p> < input type =buttonvalue =Ok> < / div>< / div>  
 

href =https://developer.mozilla.org/en-US/docs/Web/CSS/opacity =nofollow> opacity ，该效果适用于整个元素，包括子元素和内容。

从 MDN ：

[Opacity ]适用于整个元素，包括其内容
，即使该值不是由子元素继承。因此，
元素及其包含的子元素都具有相同的不透明度相对于元素的背景的
，即使元素及其子元素具有相对于彼此的
不同的不透明度。

此规则的例外是 background-color 设置为 rgba （）。

rgba（）颜色模型允许<$ c

因此，您可以将父项设置为 div {background -color：rgba（255，255，255，0.6）; } ，这将在 opacity 为 0.6 > background-color 。子元素不受影响。

点击此处了解详情： Opacity和RGBA的简介

对于不透明度和图片，请参阅：

• 我可以只为div的背景图片设置不透明度吗？


• CSS：使用不透明度设置背景图片

I am working on a webpage and I want to put a button on a transparent div that shows the background image. But when I place the button it is also transparent. How can I make it not transparent?

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    <input type="button" value="Ok">

  </div>
</div>

解决方案

Use the rgba() color method instead of opacity:

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid black;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    <input type="button" value="Ok">
  </div>
</div>

With opacity, the effect applies to the entire element, including child elements and content.

From MDN:

[Opacity] applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

The exception to this rule is background-color set with rgba().

The rgba() color model allows for the opacity to be set via the alpha channel.

So you could set the parent to div { background-color: rgba (255, 255, 255, 0.6); }, and that would set the opacity to 0.6 on the background-color alone. Child elements would be unaffected.

Learn more here: A brief introduction to Opacity and RGBA

For opacity and images see:

• Can I set an opacity only to the background image of a div?
• CSS: set background image with opacity?

这篇关于子元素继承父级的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！