Heim > Web-Frontend > CSS-Tutorial > Wie dehne ich ein Hintergrundbild, um eine TD-Zelle mit CSS zu füllen?

Wie dehne ich ein Hintergrundbild, um eine TD-Zelle mit CSS zu füllen?

Susan Sarandon
Freigeben: 2024-11-05 06:12:02
Original
252 Leute haben es durchsucht

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

Abdecken der TD-Zelle mit einer Bilddehnung

Problem: Verbessern Sie eine Webseite, indem Sie ein Hintergrundbild strecken, um es auszufüllen die Gesamtheit einer Tabellenzelle () mit CSS.

CSS-Fragment:

<code class="css"><style>
.style1 {
    background-image: url('http://localhost/msite/images/12.PNG');
    background-repeat: no-repeat;
    background-position: left center;
}
</style></code>
Nach dem Login kopieren

Ziel: CSS verwenden, um Erweitern Sie das Hintergrundbild so, dass es die gesamte TD-Zelle umfasst, um einen „gestreckten“ Effekt zu erzielen.

Lösung:

<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>
Nach dem Login kopieren

Kompatibilität:

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

Zusätzliche Option für 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>
Nach dem Login kopieren

Danksagung:

Der Dank geht an Chris Coyier für den aufschlussreichen Artikel unter: http:// css-tricks.com/perfect-full-page-background-image/

Das obige ist der detaillierte Inhalt vonWie dehne ich ein Hintergrundbild, um eine TD-Zelle mit CSS zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage