Afficher uniquement une partie de l'image d'arrière-plan en utilisant CSS3

Question

Est-il possible de n'afficher qu'une partie d'une image d'arrière-plan lors de l'utilisation de CSS3? Je veux utiliser une image comme arrière-plan mais n'en montrer que la moitié, donc y a-t-il quelque chose comme un masque que vous pouvez définir pour vos backgroundimages?

Answer 1

Eh bien seul problème est que "clip-path", "masque" et "filtre" (non pas le "filtre" IE mais SVG "filtre") ne fonctionne que pour Firefox et Safari (oui non Chrome). Et ils le font différemment. Firefox a besoin d'un svg clipPath spécifié via un identifiant, par exemple:

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

tandis que Safari utilise seulement la forme elle-même pour créer clipPath de:

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

Je n'ai pas encore de découvrir une façon de le faire dans Opera et Chrome.

Mais pour FF et Safari "cross browser" exemple j'ai créé ceci: http://tokimon.dk/testing/css-svg-test.html.

Sinon, vous pouvez peut-être obtenir quelque chose de la manipulation de fond en CSS 3: http://www.css3.info/preview/

Answer 2

Essayez ceci:

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

Answer 3

WebKit prend désormais en charge les masques alpha dans les images SVG CSS peuvent être utilisés comme masques. Par exemple, un cercle partiellement transparent.

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

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

espérons que cette aide.

Answer 4

Dans Opera vous ne pouvez utiliser SVG en ligne dans une page xhtml faire cet effet. Chuck votre image à l'intérieur de SVG, définir un masque et faire un <use xlink:href="#image" mask="url(#yourmask)"/> pour obtenir l'effet.