Question

我使用＆＃39; rgba＆＃39;来应用不透明度在父div上，我不想在子div上继承这个效果..我怎样才能从子元素中限制rgba样式... 我也发布了图片以获得更好的帮助。

＆＃39; http://imgur.com/a/YxipO＆＃39; =（我的代码的实际图像）

＆＃39; http://imgur.com/a/7ltDa＆＃39; =（我想用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中删除样式？

4 个答案: