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

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>

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>

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>

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!