如何使用CSS或JS從子div中刪除樣式？

Question

我已經在父div上使用“ rgba”應用了不透明度，並且我不想在子div上繼承此效果。如何限制子元素的rgba樣式...我也張貼了圖像，以提供更好的幫助。

' http://imgur.com/a/YxipO'= （我的代碼的真實圖片）

' http://imgur.com/a/7ltDa'= （我要使用CSS或JS做的事情）

.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}

.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}

Answer 1

您可以考慮以下示例方法：

 .content { height: 200px; width: 200px; position: relative; } .banner-inner { background-color: rgba(0, 0, 0, 0.2); padding: 3%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .logo-circle { width: 1em; border: 7px solid #fff; border-radius: 50%; padding: 1em; z-index: 2; height: 1em; position: absolute; top: 50%; margin-top: -1.5em; left: 50%; margin-left: -1.5em; } 

 <div class="content"> <div class="banner-inner"></div> <div class="logo-circle"></div> </div> 

Answer 2

您可以使用與.logo-circle中的背景相同的圖片（如背景所示）。 然后像這樣設置圖像的位置： background-position: center;

要么：

為圖像的大小與.logo-circle一起使用wrapper div並設置overflow: hidden; 。 為.logo-circle設置一個非常大的陰影，例如box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);

Answer 3

對於圓形背景使用RGBA

.logo-circle {
  background: rgba(0, 0, 0, 0.2);
  width: 15%;
  border: 7px solid #fff;
  border-radius: 50%;
  padding: 16px;
}

Answer 4

您可以像這樣使用陰影

 .content { height: 200px; width: 300px; position: relative; background: url(http://lorempizza.com/500/350/); background-size: cover; } .logo-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; border: 7px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1000px rgba(255,255,255,0.5); /* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent opacity inside circle */ } 

 <div class="content"> <div class="logo-circle"></div> </div>