Можно ли убрать фоновое изображение, оставив видимыми детские вещи?

Итак, у меня есть тег <header> с тегом <h1> внутри него. У тега <header> есть фоновое изображение CSS, которое я хочу постепенно затухать с помощью CSS или jQuery.

<header>
    <h1>Title</h1>
</header>

Возможно ли это без затухания всего тега <header> (который также исчезнет в теге <h1>? Я не хочу каким-либо образом изменять HTML.


html css transitions
person Kryptix    schedule 29.05.2012    source источник
comment
Не в кроссбраузерном режиме. Вам нужно создать фоновое <div> наложение.   -  person Blender    schedule 29.05.2012

Ответы (3)


arrow_upward
1
arrow_downward

Дочерние элементы наследуют непрозрачность своих родителей.

Если ваш фон цветной, вместо этого вы можете анимировать свойство background-color.

Если это не цвет, вы можете переместить дочерние элементы за пределы анимируемого элемента, но затем расположить их с помощью CSS, чтобы они выглядели как дочерние элементы (или что-то еще, что соответствует вашему дизайну).

person alex    schedule 29.05.2012

arrow_upward
0
arrow_downward

Это невозможно, поскольку ваш <h1> является дочерним узлом.

Если вы не хотите изменять HTML, вы можете использовать jquery, чтобы переместить <h1> из <header>, а затем отдельно анимировать заголовок.

например с чем-то вроде:

$('header:first')
    .find('h1')
        .insertBefore('header:first')
        .end()
    .fadeIn();

Вам нужно будет применить правила CSS, чтобы <h1> располагалось над <header>, даже если это не дочерний узел.

person Jhong    schedule 29.05.2012

arrow_upward
0
arrow_downward

Я уверен, что вы могли бы transition изменить цвет фона на изображение, используя:

transition: background 5s linear

Так, например:

#div {
    -webkit-animation:ani 5s;       
    background: url('http://tinyurl.com/cxnemfx');
}

@-webkit-keyframes ani {
from {background: black;}
to {background: url('http://tinyurl.com/cxnemfx');}
}​

Демонстрация для Chrome/Safari: http://jsfiddle.net/f32RS/1/

Однако вы можете захотеть перейти от другого изображения к конечному изображению для полного эффекта. Пример именно такой, и пример того, что возможно. ;)

person Shaz    schedule 29.05.2012