Отображение только части фонового изображения с использованием CSS3

Question

Можно ли показать только часть фонового изображения при использовании CSS3? Я хочу использовать изображение в качестве фона, но отображать его только наполовину, поэтому есть ли что-то вроде маски, которую вы можете определить для своих фоновых изображений?

Answer 1

В Opera вы можете использовать только встроенный SVG на странице xhtml, чтобы сделать этот эффект. Поместите свое изображение в SVG, определите маску и выполните <use xlink:href="#image" mask="url(#yourmask)"/>, чтобы получить эффект.

Answer 2

WebKit теперь поддерживает альфа-маски в CSS Изображения SVG можно использовать в качестве масок. Например, частично прозрачный круг.

-webkit-mask-image: url (circle.svg);

http://webkit.org/blog/181/css-masks/

надеюсь, это поможет.

Answer 3

Ну, единственная проблема в том, что «clip-path», «mask» и «filter» (нет не IE «filter», а SVG «filter») работает только для Firefox и Safari (да нет Chrome). И они делают это по-другому. Firefox требуется svg clippath, указанный с помощью идентификатора, например:

.box { clip-path: url("roundedrect.svg#cp1"); }

, в то время как Safari просто использует саму форму для создания clippath из:

.box { clip-path: url("roundedrect.svg"); }

Мне еще предстоит найти способ сделать это в Opera и Chrome.

Но для FF и Safari "кросс-браузерный" пример я создал это: http://tokimon.dk/testing/css-svg-test.html.

В противном случае, возможно, вы сможете извлечь что-то из фоновой манипуляции в CSS 3: http://www.css3.info/preview/

Answer 4

Попробуйте это:

body {
    background-image: url('top.jpg'), 
                      url('middle.jpg'), 
                      url('bottom.jpg');
}