Aide pour le redimensionnement automatique de l'image d'arrière-plan

Question

Y at-il un moyen de redimensionner automatiquement l'image d'arrière-plan d'un élément. Par exemple, dans mon code HTML, je voudrais que mes liens aient une image de fond. L'image a incliné la bordure gauche et droite et arrondit les coins supérieurs.

On devrait normalement spécifier la largeur d'un élément d'ancrage pour accommoder l'image d'arrière-plan. Mon problème est que la largeur devrait être dynamique et l'image de fond devrait aussi ajuster si la largeur du lien est plus petite que la largeur de l'image .. un peu comme faire l'inverse ..

Avez-vous des solutions pour cela ? Merci!

Answer 1

Il existe une manière assez standard d'y parvenir en utilisant 2 éléments. Comme vous pouvez le voir, vous mettez un span dans votre lien que vous allez avoir le bouton. L'image que vous utilisez doit être divisée en deux parties, l'une sur le côté gauche et l'autre sur la partie centrale du bouton, et sur le côté droit. Vous allez définir l'étendue contenue pour avoir le côté gauche large de l'image du bouton. Le lien contiendra le côté droit du bouton. Css devrait ressembler à ceci

a{ 
background: url("rightimg.png") right no-repeat; 
display:block; 
padding-right: [width of image]; 
width:auto; 
height:[height of image]; 
line-height:[height of image] 
} 
a span{ 
background: url("leftimg.png") left no-repeat; 
display:block; 
width:auto; 
height:[height of image]; 
line-height:[height of image] 
} 
a{ 
background: url("rightHover.png") right no-repeat; 
} 
a span{ 
background: url("leftHover.png") left no-repeat; 
} 

Yo devra modifier ce autour de votre code CSS pour le faire rentrer dans votre mise en page particulière.

La raison pour laquelle l'image de gauche est dans la plage est telle que si vous avez de la transparence sur votre bouton, vous ne devrez pas chevaucher les images. Gardez cela à l'esprit lorsque vous coupez votre image.

Je recommanderais de faire l'image de gauche au-dessus de 200px de large pour permettre une grande quantité d'espace d'expansion.

Answer 2

Connaissez-vous la taille de votre image de fond?

a 
{ 
    background: #ffffff url('yourimage.gif') no-repeat 0 0; 
    display: block; 
    width: XXXpx; 
    height: YYYpx; 
} 

CSS ne peut pas faire de calcul, c'est une manière d'appliquer du style à la page.

Mais si vous ne définissez pas spécifiquement la hauteur et la largeur, et vous laissez le "display: block", votre image sera la largeur du texte de votre "a href".

a 
{ 
    background: #ffffff url('yourimage.gif') no-repeat 0 0; 
} 

Answer 3

EDIT: solution de Jonathan Parc ci-dessus serait mieux si les balises d'ancrage en question sont des éléments de menu (par exemple "onglets" ou "boutons"). Après avoir relu votre question, je suppose que c'est le cas. Vous pouvez obtenir l'effet décrit avec les propriétés background-size ou border-image de CSS3. Cependant, je ne suis pas sûr de la façon dont les navigateurs gèrent ces propriétés lorsque l'élément impliqué est en ligne et renvoie à deux lignes ou plus. En outre, la propriété background-size risque de fausser votre image de manière indésirable.

Notez qu'il peut également être possible de réaliser ceci sans images. Pouvez-vous poster une image de la forme que vous souhaitez créer autour de vos balises d'ancrage?

Answer 4

Je veux juste savoir comment utiliser cette technique pour un bouton de formulaire.

compte tenu du fait que je ne peux pas ajouter une balise span wrapper autour de l'étiquette d'entrée car il devient généré à partir d'une bibliothèque. Mais j'ai des noms de classe et d'id disponibles pour l'étiquette d'entrée.