2015-06-18 1 views
1

Есть ли какой-то трюк, чтобы сделать элемент прозрачным через BG своего родительского элемента и, например, показать тело BG.Сделать элемент прозрачным через несколько родительских элементов?

Пример:

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

Таким образом, даже если это родительский элемент имеет черный фон, он все равно проступают на фоне тела. Это возможно?

+0

Я видел это решение: http://jsfiddle.net/nLa8oaq0/21/, но думаю, что это очень неудобно и не будет работать для динамических элементов. –

+0

Невозможно без javascript. – nicael

+0

Какой javascript? –

ответ

1

Вы можете добавить класс для всех элементов, которые должны быть прозрачными

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

Затем вы можете импортировать JQuery и добавьте этот код:

$(".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/

+0

Я не верю, что вы внимательно прочитали вопрос ... –

+0

Извините, мой английский не всегда хорош, но я надеюсь, что на этот раз я помогу вам по-настоящему. Это создает некоторую «дыру» в фоновом режиме родителя, поэтому фон тела отображается через ссылки. – ImLearningZF2