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

问题描述：

我已在父div上应用“rgba”的不透明度，我不想在子div上继承此效果。我如何限制子元素的rgba风格... 我已发布图片以及更好的帮助。如何使用css或js从子div中删除样式？

'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;}

如果您想要“.logo-circle”。有点透明的背景，你可以将背景颜色设置为“.logo-circle”，并使用较深的alpha值0.6或什么的？ –

是的，我已经尝试过，但仍有模糊效果..清晰度缺失... – Moiz

答

您可以使用一个箱子的影子，这样

.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>

谢谢....它适用于我... – Moiz

@Moiz不客气...并请考虑接受我的答案以及 – LGSon

答

您可以考虑下面的例子方法：

.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>

你可以检查IMG网址，我上面提到过...我的问题是从子div删除样式... – Moiz

答

您可以使用与.logo-circle中背景相同的图片（如背景所示）。而这样设置图像的位置：background-position: center;

或：

使用包装DIV为.logo-circle与图像的尺寸相同，并设置overflow: hidden;。对于.logo-circle在圈使用RGBA设定一个非常大的阴影，像box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);

已经尝试过...没有用的..你能给我另一个建议..？ – Moiz

问题是什么？它不工作吗？ –

也许有帮助：相关问题（http://stackoverflow.com/questions/20242806/hole-in-overlay-with-css）@Moiz –

答

有关背景

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

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

相关推荐