Make element transparent through multiple parent elements?

Question

Make element transparent through multiple parent elements?

165 views Asked by Daniel Scott At 24 November 2024 at 01:52

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 answers

**ImLearningZF2** · Answer 1 · 2015-06-18 19:20:26

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/

TechQA.

Make element transparent through multiple parent elements?

There are 1 answers

Related Questions in CSS

Related Questions in HTML

Related Questions in BACKGROUND

Related Questions in TRANSPARENT

Related Questions in MASK

Popular Questions

Popular Tags

Trending Questions