Maison > interface Web > tutoriel CSS > Comment étirer une image d'arrière-plan pour remplir une cellule TD avec CSS ?

Comment étirer une image d'arrière-plan pour remplir une cellule TD avec CSS ?

Susan Sarandon
Libérer: 2024-11-05 06:12:02
original
331 Les gens l'ont consulté

How to Stretch a Background Image to Fill a TD Cell with CSS?

Recouvrir la cellule TD avec un étirement d'image

Problème : Améliorer une page Web en étirant une image d'arrière-plan pour la remplir l'intégralité d'une cellule de tableau () en utilisant CSS.

Fragment CSS :

<code class="css"><style>
.style1 {
    background-image: url('http://localhost/msite/images/12.PNG');
    background-repeat: no-repeat;
    background-position: left center;
}
</style></code>
Copier après la connexion

Objectif : Utiliser CSS pour étendre l'image d'arrière-plan afin d'englober l'intégralité de la cellule TD, obtenant ainsi un "étiré" effet.

Solution :

<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>
Copier après la connexion

Compatibilité :

  • Safari 3
  • Chrome
  • IE 9
  • Opéra 10
  • Firefox 3.6

Option supplémentaire pour IE :

<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>
Copier après la connexion

Reconnaissance :

Les crédits reviennent à Chris Coyier pour l'article perspicace trouvé sur : http://css-tricks.com/perfect-full-page-background-image/

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal