css box shadow + images d'arrière-plan transparentes = décompression intuitive

  • J'ai une image de bouton que j'utilise comme une image de fond pour certains liens.
  • L'image de fond a arrondi les angles.
  • Je veux utiliser un css drop shadow au lieu de mettre de l'ombre à l'image

Le problème est, l'ombre semble être fait autour de l'élément. Bien que je m'attendais à voir l'ombre de la couleur à travers les parties transparentes de l'image de fond, je suis en voir la couleur d'arrière-plan à la place (voir ce jsfiddle).

Mon véritable objectif est un peu plus complexe, mais si je peux satify mes trois premiers points de balle alors je peux le clou de cette tâche. Plus précisément, ce que je veux faire est d'utiliser deux éléments imbriqués avec les images de fond des parties droite et gauche d'une image de bouton (coins arrondis), de sorte que je peux utiliser le même css pour envelopper un "bouton" autour d'un texte de n'importe quelle longueur. Depuis les origines se chevauchent dans une css 'portes coulissantes style, un png alpha ombre portée montre un 2x sombre section où les images se chevauchent. Soo.. je pensais utiliser un css de l'ombre, mais comme vous pouvez le voir dans le jsFiddle, il y a des problèmes aussi.

Des idées?

source d'informationauteur doub1ejack

  1. 12

    Box-ombre, ne pas montrer à travers des arrière-plans transparents. Plus simple test, ce serait le cas:

    .box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}​

    La sortie devrait être une belle floue carré noir à droite? Eh bien... non, c'est un carré blanc avec une dropshadow. http://jsfiddle.net/UjhrW/

    Pour atteindre ce que vous voulez faire, vous aurez besoin d'un autre balisage de la dropshadow, de le remplir avec du blanc, et ensuite définir le déversement de l'ombre, de sorte qu'il ressemble à un carré flou...

    .box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}​

    http://jsfiddle.net/Etmty/