Comment créer une ombre autour d'une image d'arrière-plan
background: url("images/main_bg.png") repeat;Est un en-tête/bannière image d'arrière-plan dans le style.css, mais vous ne savez pas comment faire pour obtenir une ombre autour d'elle...
J'ai essayé
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
color: #333333;
background: url("images/main_bg.png") repeat;
box-shadow: 0 0 5px 2px #282a2d;
line-height: 1.4;
}Mais cela ne fonctionne pas...
OriginalL'auteur Damian | 2013-07-07
Vous devez vous connecter pour publier un commentaire.
TL;DR:
Dans le cas où vous êtes satisfait de
WebKitChrome uniquement prise en charge, utilisez Les Filtres CSS.Dans le cas où vous êtes satisfait avec polyfilled CSS Contexte de Canevas et de la Toile, vous pouvez soutenir Mozilla et les navigateurs WebKit, bien que, Chrome n'aura pas d'effet de flou pour elle de l'ombre.
Si vous pouvez recréer votre image en SVG, et à votre cible navigateur ne le soutenir, c'est aussi un option viable. en Fait, cela semble être la meilleure option dans le cas où vous pouvez obtenir vos antécédents en SVG. La plupart des grands navigateurs montrent le même résultat, à l'exception de Safari qui apparaît à déposer le filtre.
Vous pouvez lire ci-dessous sur le processus de la façon dont les options de n'évoluer.
Réponse originale à cette question:
Je doute que ce que vous cherchez avec impatience, c'est possible.
Tout d'abord,
bodyprend 100% de la hauteur et de 100% de la largeur de la page, le "dehors" de l'ombre, il sera toujours caché.Si vous définissez la propriété comme suit:
vous devriez voir l'ombre, cependant, je doute que c'est ce que vous cherchez.
Vous pourriez surmonter le problème en enveloppant l'image dans un nouvel élément, qui est un enfant de
bodyet est plus petit que 100% debody's dimensions.Aussi, vous pouvez faire
body's des dimensions inférieures à 100%, même si, je n'encourage pas à le faire -, elle peut se briser dans certains navigateurs, et ainsi de suite.Mon deuxième deviner, dérivés de vous que vous utilisez une
png, par conséquent, image transparente, c'est que vous souhaitezshadowl'image, il est rempli de pixels des bords, en laissant la transparence de la vierge. Tout cela ressemble à une bonne idée de le faire, ce n'est pas ce que CSS ne.La propriété est appelé
box-shadowpas simplementshadowde sorte qu'il indique déjà qu'il ne sera pas possible.Je ne sais pas si c'est possible, mais vous pouvez essayer d'utiliser
SVGet des filtres pour le faire. Je ne suis pas expert en SVG - ne sera pas en mesure de fournir des exemples immédiatement (il regarde).Une possibilité est d'utiliser
toilecomme arrière-plan pour votre élément, et appliquer l'ombre par programme (une itération à travers pixels et ajouter plus de pixels).Mise à jour: Ne savais pas que la Toile est assez intelligent pour des ombres à travers les images transparentes, le programmatique n'est pas nécessaire.
Gardez à l'esprit que les 2 dernières variantes seront très certainement être mal supporté par les navigateurs.
Mises à jour:
Filtres CSS:
Bon, il y en a un plus de possibilité - filtres CSS, même si, comme de l'écriture, ils sont pris en charge uniquement par WebKit.
Pas sûr en fait que s'ils fonctionnent dans tous les navigateurs WebKit (Safari, Opera, Chrome), mais ils n'en Chrome.Vérifier avec la dernière version de Safari pour Windows, Chrome et Opera, prouve, que la propriété ne fonctionne que sur Chrome.
Il y a un "mais", c'est pas pris en charge sur le corps (jsfiddle.net), et je pense que tous les trucs cool a quitté le
bodyderrière.En cas de nœud enfant, il fonctionne (jsfiddle.net)!
P. S. Finalement, nous pouvons voir les filtres CSS mis en œuvre dans chaque navigateur. Qui en fait la meilleure option pour une telle fonctionnalité.
Toile:
Mise à jour:
J'ai fait des expériences avec de la toile. En général, c'est un succès et fonctionne même pour les
body: http://jsfiddle.net/psycketom/3VBMJ/4/.Cependant, je n'arrivais plus à faire le
shadowBlurtravailler bien. Peut-être qu'il ne fonctionne pas sur CSS Toile Contexte.Et, Firefox ne prend pas en charge nativement cssCanvasContext, de sorte que les
-moz-background-moz-element, mais depuis il n'y a pas de cssCanvasContext, il ne parvient toujours pas) la propriété est ignorée. Je pense que ça pourrait être piraté avec un hors de l'écran en toile.Mise à jour 2:
La
shadowBlurpropriété fonctionne sur Safari, n'est-ce pas sur Chrome.Mise à jour 3:
http://jsfiddle.net/psycketom/3VBMJ/6/ J'ai fait un test avec un écran de toile, mais je ne pouvais pas le pirater ensemble. Je suis en train de donner un peu plus de mon temps en ce moment.
Mise à jour 4:
Hors de l'écran de la toile fonctionne dans Firefox - http://jsfiddle.net/psycketom/3VBMJ/12/, mais ne fonctionne pas dans Webkit.
Généré dynamiquement, un canevas aussi est-il, cependant, il doit être ajouté, et caché par la suite.
Mise à jour 5 (la peine de vérifier):
J'ai fait un sale polyfill, maintenant, la Toile de fond devient pris en charge dans les deux - Webkit et Mozilla navigateurs.
Mise à jour 6:
J'ai fait un rapide test de compatibilité de Chrome (27.0.1453.116 m) fonctionne, Firefox (22.0) fonctionne, Safari (pour Windows, 5.1.7 7534.57.2).
Comme pour... IE (10.0.9200.16618) ne fonctionne pas, Opéra (12.14 1738) ne fonctionne pas.
SVG:
Tout d'abord, SVG exige que vous créez votre image dans des vecteurs.
Mise à jour:
Oh boy, oh boy... SVG... http://jsfiddle.net/psycketom/3VBMJ/18/. Ce n'est pas vraiment une image de fond, c'est juste SVG coulé à l'intérieur de l'HTML, et c'est l'élément conteneur a
pointer-events: noneappliquée, et de désactiver toutes les entrées de souris.Fonctionne dans les deux, Firefox et Chrome, et d'autres encore sans doute, car il dépend de SVG qui est un peu plus soutenue que CSS3/HTML5. Gardez à l'esprit cependant, que certaines parties de SVG ne sont pas pris en charge, les filtres, éventuellement, être l'un d'entre eux.
Mise à jour 2:
En versant tout ce que nous avions en ligne de html avant dans un fichier propre, nous pouvons utiliser SVG comme
background-image. Vérifié dans google Chrome, et Fox - fonctionne dans les deux.Mise à jour 3:
J'ai fait un rapide test de compatibilité de Chrome (27.0.1453.116 m) fonctionne, Firefox (22.0) fonctionne, c'est à dire (10.0.9200.16618) de travaux, l'Opéra (12.14 1738).
Comme pour Safari (pour Windows, 5.1.7 7534.57.2) - il fonctionne, mais n'affiche pas d'ombre à tous.
C'est ce que je voulais dire avec l'élément enfant:
http://jsfiddle.net/psycketom/3VBMJ/21/
Informations supplémentaires:
http://jsfiddle.net/psycketom/3VBMJ/17/ il apparaît que la
shadowBlurde Chrome est pris en charge en général (la boîte rouge), mais il manque de soutien de la PNG (smiley).Je suis confus, maintenant, c'est à cause de la récente interrupteur à Clignoter ou s'il n'a jamais été pris en charge dans Chrome?
Veuillez voir la deuxième partie de la mise à jour de réponse. Dans le cas où ce n'est pas ce que vous essayez d'atteindre, laissez-moi savoir et je vais vous donner de l'enfant exemple de code. Dans le cas où il est, je vais rassembler les matériaux et de fournir des exemples plus tard, dans un avenir pas si lointain.
Je pense que je vous ai fourni avec toutes les solutions possibles, peut-être même ceux qu'on n'a pas hâte. Ma réponse est maintenant terminée, il peut être un peu un gâchis, mais j'ai fait de mon mieux pour le nettoyer.
Bon, j'ai fini par trouver qu'elle montre, seulement si une partie de l'en-tête de l'enfant, mais parce que d'autres paramètres, y compris le logo, l'ombre se termine sous le logo. s18.postimg.org/upih5ap0p/Jia_Yu_G3_New_ROM_Firmware022.jpg Si je contrôle l'arrière-plan de l'ombre de la hauteur, il coupe le bas du logo. Si j'essaie de l'inclure dans son propre enfant nom dans le style.css, peu importe où je place la DIV dans le header.php l'image ne montre pas du tout...Il ne s'affiche que lorsqu'il est ajouté à #existant gazpo-d'en-tête j'ai passé 3 heures sur ce et ma tête est sur le point d'exploser. Baaaaaa
faire un jsfiddle avec un code d'exemple, prenons un coup d'oeil à elle.
OriginalL'auteur jolt
La première valeur pour le décalage horizontal, la deuxième pour la verticale. la troisième partie décrit le rayon de flou et le dernier de la propagation de rayon.
Mais ithink il fonctionne si vous ne définissez le flou et la propagation, trop.
Quel navigateur utilisez-vous?
avez-vous essayé
OriginalL'auteur dba
<body>tag<div class="x">your data</div>ou<table><tr><td class="x">your data</td></tr></table><div>votre code sera comme<table>votre code sera commeOriginalL'auteur Ritabrata Gautam