如何使用 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 使用与图像大小相同的包装器 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>

如何使用 css 或 js 从子 div 中删除样式？

How to remove style from child div using css or js?

html

javascript

css

styles