Fatal编程技术网
  • css/
  • Css 通过多个父元素使元素透明？

Css 通过多个父元素使元素透明？

css html

Css 通过多个父元素使元素透明？,css,html,background,transparent,mask,Css,Html,Background,Transparent,Mask,是否有一些技巧可以使一个元素通过其父元素的BG透明，例如显示主体BG 例如： <body style="background: url(galaxy.jpg)"> <div style="background: black;"> <a href="#" style="background:super-transparent;">Click Me!</a> </div> </body> 因此，即使它的父元素有一个黑色背景

是否有一些技巧可以使一个元素通过其父元素的BG透明，例如显示主体BG

例如：

<body style="background: url(galaxy.jpg)">
<div style="background: black;">
<a href="#" style="background:super-transparent;">Click Me!</a>
</div>
</body>
因此，即使它的父元素有一个黑色背景，它仍然会一直显示到主体背景。这可能吗？

您可以向所有必须透明的元素添加一个类

    <a href="#" class="super-transparent">Click Me!</a>
JSFiddle:

我见过这个解决方案：但我认为它非常笨重，不适用于动态元素。没有javascript是不可能的。什么类型的javascript？对不起，我的英语并不总是很好，但我希望这次我真的能帮到你。这会在父对象的背景中创建一些“洞”，因此通过链接可以看到主体的背景。 
$(".super-transparent").css("background", $("body").css("background-image")).each(function(index, element) {
    var position = $(this).position();
    $(this).css("background-position", "-"+position.left+"px "+"-"+position.top+"px");
});
});