CSS image de fond seulement dans la zone vide

J'ai un petit div box à l'intérieur d'un main div. La div principale utilise une image de fond. Je veux ajouter du texte dans le div box et une image d'arrière-plan, de sorte que l'image d'arrière-plan apparaît uniquement dans la zone vide après le texte. Ainsi, il semblerait que le texte dans la boîte ait l'image d'arrière-plan de la div principale et que le reste de la zone vide à l'intérieur de la boîte div ait une autre image de fond. Voici le html:CSS image de fond seulement dans la zone vide

 <div class="main">//width = x 
      <div class="box"> //width = x 
       <span class="text">Text, no bg. </span> // width = y 
       <!-- need bg here in x-y area.--> 
      </div> 
     </div>

espérons que cela a du sens. Tout ce que j'essaie, c'est d'avoir le même arrière-plan que le div principal sous le span dans la boîte div, et de pousser le bg b div après le texte.

Source

2012-01-06 user1117313

quel est votre css déjà? – Elen

pourquoi -1? @Elen son exemple très basique et j'ai mentionné que div principale et boîte ont même largeur, c'est tout css. – user1117313

collez le CSS même s'il est basique – Miquel

Je comprends mieux maintenant l'effet que vous recherchez. La seule façon que je peux penser utilise une table en train de la cellule droit d'être une largeur de 100% et celui de gauche sans enveloppe, vérifiez la jsFiddle suivante:

http://jsfiddle.net/LQydR/

Source

2012-01-06 23:05:22 Miquel

L'arrière-plan peut être déplacé vers la gauche si c'est ce dont vous avez besoin. Comme le dit @Elen, il est un peu difficile de savoir ce que vous attendez. Quoi qu'il en soit, en déplaçant l'arrière-plan est quelque chose comme ceci:

.main { 
    width:300px; 
    background-image:url('mainbg.png'); 
} 


.text { 
    width:100px; 
    background:none; 
} 

.box { 
    width:300px; 
    background-repeat:no-repeat; 
    background-position:100px 0; 
    background-image:url('boxbg.png'); 
}

Gardez à l'esprit qui enjambent n'obéir à la largeur et prendra la largeur du texte à l'intérieur, sauf si vous le faites pour afficher: bloc.

Source

2012-01-06 14:07:23 Miquel

Merci, l'idée est la même mais le seul problème est que le .text n'a pas de largeur fixe, donc je ne peux pas définir la position de l'image d'arrière-plan. – user1117313

C'est pourquoi vous devriez coller votre CSS et peut-être un exemple complet de ce que vous avez. Peut-être que vous avez juste besoin d'un flotteur après .text avec l'image d'arrière-plan pour obtenir l'effet que vous voulez, mais sans exemples que vous avez nous deviner. – Miquel

S'il vous plaît voir ce http://jsfiddle.net/zr9Ks/; Je ne veux pas que la boîte bg apparaisse au-dessous du texte (elle devrait apparaître seulement après le texte.) – user1117313

Je crois avoir compris ce que vous avez besoin:

.box { 
    width:300px; 
    padding-bottom: [height of the img]; 
    background: url('img.png') repeat-y left bottom; 
}

Source

2012-01-06 14:16:42 Elen

Si je comprends bien votre question, tout ce que vous devez faire est de déclarer une autre image/couleur de fond sur .main et .box et vous êtes bon aller.

Source

2012-01-06 15:08:38

CSS image de fond seulement dans la zone vide

Répondre

Questions connexes