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 (
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:
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!