透過影像拉伸覆蓋TD 單元
問題:透過拉伸背景影像以填充網頁使用網頁CSS 的整個表格儲存格(
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>
目標: 使用CSS 將背景影像延伸至覆蓋整個TD單元,實現「拉伸」效果。
解決方案:
<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>
相容性:
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>
致謝:
Chris Coyier 發表的富有洞察力的文章位於:http:// css-tricks.com/perfect-full-page-background-image/以上是如何使用 CSS 拉伸背景圖片以填充 TD 單元格?的詳細內容。更多資訊請關注PHP中文網其他相關文章!