HTML5實(shí)踐-如何使用css3豐富圖片樣式的詳解（二）

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:10:27

HTML5實(shí)踐-如何使用css3豐富圖片樣式的詳解（二）

HTML5實(shí)踐-如何使用css3豐富圖片樣式的詳解（二）:之前的教程《HTML5實(shí)踐 -- css3圖片樣式》，我介紹了如何為圖片添加background-image包裝，借助box-shadow 和 border-radius為圖片設(shè)置多種多樣的樣式，有興趣的朋友可以回頭閱讀。但是最近我在設(shè)計(jì) PhotoTouch 主題的時候遇到了問題，backg

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀HTML5實(shí)踐-如何使用css3豐富圖片樣式的詳解（二）:之前的教程《HTML5實(shí)踐 -- css3圖片樣式》，我介紹了如何為圖片添加background-image包裝，借助box-shadow 和 border-radius為圖片設(shè)置多種多樣的樣式，有興趣的朋友可以回頭閱讀。但是最近我在設(shè)計(jì) PhotoTouch 主題的時候遇到了問題，backg

　　之前的教程《HTML5實(shí)踐 -- css3圖片樣式》，我介紹了如何為圖片添加background-image包裝，借助box-shadow 和 border-radius為圖片設(shè)置多種多樣的樣式，有興趣的朋友可以回頭閱讀。但是最近我在設(shè)計(jì) PhotoTouch 主題的時候遇到了問題，background-image大小不能調(diào)整，這對于響應(yīng)式設(shè)計(jì)就不太理想了。今天我們將嘗試解決問題。

　　問題

　　大多數(shù)瀏覽器對圖片的border-radius 和內(nèi)嵌 box-shadow效果渲染的并不是很完美。這也就意味著，你不能為圖片創(chuàng)建浮雕、高光和壓縮等效果。

　　之前的解決方案

　　在之前的解決方案中，我們?yōu)閳D片的包裝添加background-image屬性，解決了上述問題。

　　background-image存在的問題

　　使用background-image的問題是，他不能實(shí)現(xiàn)圖片大小的動態(tài)縮放。所以，這種方式對于要求圖片縮放的響應(yīng)式設(shè)計(jì)來說就不那么適用了。

　　新解決方案

　　新解決方式和之前的有些相似，我們把css3的效果添加到圖片遮罩層 :after 偽類上，這樣做的好處是圖片保持了完整性和可收縮性。

　　實(shí)現(xiàn)動態(tài)效果的jquery語句

　　jquery會查詢#demo下面所有的圖片，然后為他們動態(tài)添加 span 包裝。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){

 $('#demo img').each(function() { 
 var imgClass = $(this).attr('class');
 $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');
 $(this).removeAttr('class');
 });

});</script>

　　輸出結(jié)果

　　上面的代碼會輸出下面的結(jié)果：

<span class="image-wrap " style="width: auto; height: auto;">
 <img src="image.jpg"></span>

　　css技巧

　　css技巧很簡單，遮罩的效果被用在了.image-wrap:after 上面，border-radius 同時用在了圖片和.image-wrap:after上面，來實(shí)現(xiàn)樣式效果。

　　css

.image-wrap {
 position: relative;
 display: inline-block;
 max-width: 100%;
 vertical-align: bottom;
}.image-wrap:after {
 content: ' ';
 width: 100%;
 height: 100%;
 position: absolute;
 top: -1px;
 left: -1px;
 border: solid 1px #1b1b1b;

 -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
 -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
 box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);

 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}.image-wrap img {
 vertical-align: bottom;

 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
 box-shadow: 0 1px 2px rgba(0,0,0,.4);

 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

　　圖片樣式

　　很多不同的效果，例如：浮雕、摳圖、壓縮和高光等，都可以通過使用多個內(nèi)嵌box-shadows屬性來實(shí)現(xiàn)。當(dāng)然你也可以通過使用:before，來實(shí)現(xiàn)另外的布局效果，例如高光。可以查看demo源代碼，去了解更多詳情。之后，可以調(diào)整你瀏覽器窗口的大小，來查看圖片大小是否發(fā)生了變化。