web-dev-qa-db-fra.com

Placer l'image de fond en dehors de la bordure de contenant div

J'essaie de définir une image d'arrière-plan pour être en dehors de la réalité contenant DIV.

<div class="expandable">Show Details</div>

.expandable
{
    background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}

donc, l'image "Développer" doit apparaître essentiellement à gauche de la div.

Je ne peux pas obtenir ce travail, l'image ne montre pas quand elle est positionnée à l'extérieur des frontières du conteneur. Je ne sais pas s'il y a une astuce de CSS, je manque, ou si c'est quelque chose à voir avec la mise en page de ma page (le "extensible" div est imbriqué à l'intérieur de plusieurs autres divs).

Est-il possible de faire cela? Toute astuce?

Edit: Voici un jsfiddle montrant le problème: link

htmlcssbackground-image
19
fearofawhackplanet

Vous allez devoir mettre l'image d'arrière-plan à l'intérieur d'un élément séparé. Les positions d'image d'arrière-plan ne peuvent pas placer l'image en dehors de l'élément qu'ils sont appliquées.

éditer Votre question a fait de ma mémoire et je suis allé vérifier les spécifications CSS. Il y a en fait un attribut CSS "de fond-attachement" que vous pouvez définir, qui ancrit l'arrière-plan à la fenêtre au lieu de l'élément. Cependant, c'est buggy ou cassé à IE, c'est pourquoi je l'ai assis sur la tablette "Ne pas utiliser" dans ma tête :-)

EDIT - Notez que cette réponse est à partir de 2010 et que les capacités de CSS plus récentes (et plus important encore, largement prises en charge) sont en 2016.

16
Pointy

Je sais que c'est un vieux fil mais je voulais juste le mettre à jour et ajouter que cela est possible en utilisant les éléments pseudo de CSS.

.class:before {
    content: "";
    display: inline-block;
    width: {width of background img};
    height: {height of background img};
    background-image: url("/path/to/img.png");
    background-repeat: no-repeat;
    position: relative;
    left: -5px; //adjust your positioning as necessary
}
27
Cypher909

Vous ne pouvez pas faire cela comment vous voulez exactement, mais il y a une solution assez simple. Vous pouvez mettre un autre div à l'intérieur de .expandable Comme:

<div class="expandable">Show Details<div class="expandable-image"></div></div>

Ensuite, votre CSS ressemblerait à quelque chose comme:

.expandable{ position:relative; }
.expandable-image{ 
    position:absolute; top:0px; left:-20px;
    width:<width>px; height:<height>px;
    background: url('./images/expand.gif') no-repeat;
}
9
Russell Leggett

Selon les détails de votre situation, vous pourriez être en mesure de sortir avec CSS3 de règles * frontière-image- . Par exemple, je les ai utilisés efficacement à placer " boutons de recherche factice " dans la ligne de filtre d'un CGridView widget dans yii (en cliquant n'importe où en dehors des zones d'entrée du filtre déclenchera l'appel ajax, mais ceux-ci " boutons " donnent quelque chose à faire intuitive de l'utilisateur). Il ne vous valait pas la peine de passer à la sous-classement le widget CGriDColumn pour pirater le HTML dans sa méthode RenderFilterCell () * - Je voulais une solution CSS pure.

  .myclass .grid-view .items {
    border-collapse: separate ;
  }

  .myclass .grid-view .filters td + td {
    border-image-source: url("/path/to/my/img_32x32.png");
    border-image-slice: 0 0 0 100%;
    border-image-width: 0 0 0 32;
    border-image-outset: 0 0 0 40px;
    border-width: 1px;
  }

  .myclass .grid-view .filters input {
    width: 80%;
  }

Il y a un peu d'une trousse impliquée dans les valeurs de la largeur-image-largeur - que 32 est un multiplicateur non une longueur (ne pas mettre px ) de l'unité utilisée en largeur de bordure (c'est-à-dire 1px). Le résultat est de faux boutons dans les premières colonnes N-1 de la grilleview. Dans mon cas, je n'avais besoin de quoi que ce soit dans la dernière colonne, car c'est un ckuttonsColumn qui n'a pas de boîte à filtre. Quoi qu'il en soit, j'espère que cela aide les personnes à la recherche d'une solution pure CSS:

* Peu de temps après avoir écrit cela, j'ai découvert que je peux simplement concaténer le code d'une image dans la propriété "Filtre" de la matrice utilisée pour construire le cgridcolumn, alors ma justification s'avère être discutée. De plus, il semble y avoir un problème (dans Firefox, de toute façon) avec la frontière-image-répéter étant contraint de s'étirer même lorsque l'espace est spécifié. Pourtant, peut-être que cela pourrait être utile pour quelqu'un ????: - \

3
Jeff