web-dev-qa-db-fra.com

Portée avec image de fond et pas de contenu

J'ai une durée qui n'a pas de contenu, mais j'ai besoin d'une image d'arrière-plan (une flèche, en passant).

Le problème est sans aucun contenu à l'intérieur de la durée, l'arrière-plan n'apparaît pas.

Comment puis-je résoudre ça?

htmlxhtml
21
ulima69

Définir la largeur; et les propriétés de hauteur de la travée.

<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />
42
WebMonster

Définissez style="padding-left:20px".

ou définissez display:block; width:20px; height:20px.

4
thirtydot

Essayez de mettre un espace insécable à l’intérieur, c’est-à-dire:

<span>&nbsp;</span>
1
JYelton

Vous n'avez pas besoin d'utiliser display: block. Vous pouvez utiliser position: absolute. Définissez la largeur et la hauteur sur 100%. Il faudra la largeur et la hauteur de l'image. Alors redimensionnez l'image selon vos besoins. Et aussi l'image sera verticalement centrée sur le texte. Ci-dessous un exemple. En cela, j'ai utilisé l'image 20X20 px. 

<html>
<style>
.spanImage{
    background-image: url('settings.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
<body>
<div>This is a sample demo.<span class="spanImage"></span></div>
</body>
</html>

Sortie:

 enter image description here

0
chindirala sampath kumar

si vous le définissez pour le bloquer, il sera automatiquement placé sous un autre élément, ce qui pourrait poser des problèmes de conception. Pour éviter cela, vous pouvez utiliser les avantages de l'option inline et bloquer ensemble en définissant display:inline-block. pour lui donner de la hauteur et de la largeur . Ps: Cela ne fonctionne pas sur ie7.

0
nikoss