Make element transparent through multiple parent elements?

209 Views Asked by Daniel Scott At 22 April 2025 at 18:10

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?

Original Q&A

There are 1 best solutions below

ImLearningZF2 On 18 June 2015 at 19:20

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/

Make element transparent through multiple parent elements?

There are 1 best solutions below

Related Questions in CSS

Related Questions in HTML

Related Questions in BACKGROUND

Related Questions in TRANSPARENT

Related Questions in MASK

Trending Questions

Popular # Hahtags

Popular Questions