Comment étirer une image d'arrière-plan sur une cellule TD entière ?

Étendre une image d'arrière-plan sur une cellule TD

En HTML, les éléments TD représentent des cellules de données de tableau. Le style de ces cellules peut améliorer la présentation des données tabulaires. Cet article aborde un défi de style spécifique : étirer une image d'arrière-plan sur l'ensemble d'une cellule TD.

Pour obtenir cet effet, modifiez le script CSS comme suit :

<code class="css">.style1 {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}</code>

• background : Définit la source, la position et la répétition de l'image d'arrière-plan. "cover" garantit que l'image remplit toute la cellule.
• -webkit-background-size : Préfixe du fournisseur pour les navigateurs basés sur WebKit (par exemple, Safari, Chrome).
• -moz-background-size : Préfixe du fournisseur pour les navigateurs basés sur Mozilla (par exemple, Firefox).
• -o-background-size : Préfixe du fournisseur pour Opera navigateur.
• background-size : Version préfixée non-fournisseur prise en charge par les navigateurs modernes.

Compatibilité :

Cette solution fonctionne bien dans les navigateurs suivants :

• Safari 3
• Chrome Which
• IE 9
• Opera 10
• Firefox 3.6

Considérations supplémentaires pour IE :

Pour les versions d'Internet Explorer antérieures à 9, une approche alternative est disponible :

<code class="css">filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;</code>

Cette méthode utilise le filtre AlphaImageLoader de Microsoft pour obtenir l'effet d'étirement de l'image d'arrière-plan. Cependant, il convient de noter que cette approche n'est peut-être pas aussi fiable ou performante que les techniques CSS modernes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!