Make element transparent through multiple parent elements?

202 Views Asked by At

Is there some trick to make an element transparent through it's parent element's BG and show the body BG for instance.

Example:

<body style="background: url(galaxy.jpg)">
<div style="background: black;">
<a href="#" style="background:super-transparent;">Click Me!</a>
</div>
</body>

So even though it's parent element has a black background, it would still show through to the body background. Is this possible?

1

There are 1 best solutions below

1
On

You can add a class to all element that must be transparent

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

Then you can import JQuery and add this code:

$(".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");
});
});

JSFiddle: https://jsfiddle.net/35bLdtvj/4/