HTML5實作-如何使用css3豐富圖片樣式的詳解（二）-H5教程-PHP中文網

HTML5實作-如何使用css3豐富圖片樣式的詳解（二）

黄舟

發布： 2017-03-23 15:58:13

原創

2113 人瀏覽過

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

　　問題

　　大多數瀏覽器對圖片的border-radius 和內嵌 box-shadow效果渲染的並不是很完美。這也意味著，你不能為圖片創造浮雕、高光和壓縮等效果。

　　之前的解決方案

　　在先前的解決方案中，我們為圖片的包裝添加background-image屬性，解決了上述問題。

　　background-image存在的問題

　　使用background-image的問題是，他無法實現圖片大小的動態縮放。所以，這種方式對於要求圖片縮放的響應式設計來說就沒那麼適用了。

　　新解決方案

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

　　實現動態效果的jquery語句

　　jquery會查詢#demo下面所有的圖片，然後為他們動態加入 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(){

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

});</script>

登入後複製

　　輸出結果

　　上面的程式碼會輸出下面的結果：

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

登入後複製

　　css技巧

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

　　css

.image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}.image-wrap:after {
    content: &#39; &#39;;
    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;
}

登入後複製