Question

我已设置特定父元素（.container）的不透明度。它不是应用于容器而只适用于容器内的子（.donate-btn）（最终我希望相反的是真实的，因为父级具有降低的不透明度并且子级是实体的， SO中的多个答案，但我没有看到任何相反的问题）。 .container的父（#main）有背景图片。

当我第一次开始使用不透明度时，父div显示应用的不透明度。出于某种原因，它不是，我不知道发生了什么变化。

以下是相关的CSS：

.container {

   margin-right: 10%;
   margin-left: 10%;
   display: block;
   padding: 30px;
   padding: top 300px;
   opacity: .5;
   border: 2px solid black;
   border-radius: 2em;
}

.donate-btn{
    border: 2px solid black;
    border-radius: 2em;
    display: inline-block;
    margin: 15px;
    padding: 15px;
    width: 200px;
    height: 80px;

}

HTML：

<section id="main"> 
        <div class="container">
            <form id="sendDonation">
                <input id='donation-amt' type="hidden" name="amount">
                <button class='donate-btn' data-amt='25'>
                    <div class='amt'>$25</div>
                </button>
                <button class='donate-btn' data-amt='50'>
                    <div class='amt'>$50</div>
                </button>
                <button class='donate-btn' data-amt='100'>
                    <div class='amt'>$100</div>
                </button>
      </form>
     </div>
</section>

这是jsfiddle。为简单起见，我将背景设置为绿色（而不是图像）。

为什么.container的不透明度不会改变，只有孩子？如何才能使.container的不透明度发生变化？

Answer 1

这是因为你的容器没有背景颜色 - 默认是透明的。

这种错觉使得不透明度似乎不会影响容器，事实上它确实如此。

要清楚地看到不透明效果，请添加纯色背景色：

＆＃13;

#main {
  /* background-image: url("img/donate-background.jpg"); */
  background-color: green;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 30px;
}
.container {
  margin-right: 10%;
  margin-left: 10%;
  display: block;
  padding: 30px;
  padding: top 300px;
  opacity: .5;
  border: 2px solid black;
  border-radius: 2em;
  background: white;
}
.donate-btn {
  border: 2px solid black;
  border-radius: 2em;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 200px;
  height: 80px;
}

＆＃13;

<section id="main">
  <div class="container">
    <form id="sendDonation">
      <input id='donation-amt' type="hidden" name="amount">
      <button class='donate-btn' data-amt='25'>
        <div class='amt'>$25</div>
      </button>
      <button class='donate-btn' data-amt='50'>
        <div class='amt'>$50</div>
      </button>
      <button class='donate-btn' data-amt='100'>
        <div class='amt'>$100</div>
      </button>
    </form>
  </div>
</section>

＆＃13;

Answer 2

您的.container元素确实具有不透明度，但该元素内部（直接）没有内容/背景/任何内容，以使其不透明。

如果（例如）您将.container的背景设置为red，则可以看到它具有不透明度：

＆＃13;

body {
  background: white;
}
#main{
	/* background-image: url("img/donate-background.jpg"); */
	background-color: green;
  background-size: cover;
	padding-top: 30px;
	padding-bottom: 30px;
				
}

.container {
	   margin-right: 10%;
	   margin-left: 10%;
	   display: block;
	   padding: 30px;
	   padding: top 300px;
	   opacity: 0.5;
	   border: 2px solid black;
	   border-radius: 2em;
       background: red;
    }

    .donate-btn{
		border: 2px solid black;
		border-radius: 2em;
		display: inline-block;
		margin: 15px;
		padding: 15px;
		width: 200px;
		height: 80px;
					
	}

＆＃13;

<section id="main">	
		<div class="container">
			<form id="sendDonation">
				<input id='donation-amt' type="hidden" name="amount">
				<button class='donate-btn' data-amt='25'>
					<div class='amt'>$25</div>
				</button>
				<button class='donate-btn' data-amt='50'>
					<div class='amt'>$50</div>
				</button>
				<button class='donate-btn' data-amt='100'>
					<div class='amt'>$100</div>
				</button>
      </form>
     </div>
</section>

＆＃13;

CSS：为什么不透明度仅适用于子元素而不适用于父元素？

2 个答案: