社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 主體

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

黄舟
發布： 2017-03-23 15:55:33
原創
1779 人瀏覽過

　　在css3中，直接在圖片上使用box-shadow 和 border-radius，瀏覽器並不能很好的渲染。但如果把圖片當作background-image，新增的樣式瀏覽器可以很好的渲染。我將會介紹如何使用box-shadow, border-radius 和 transition建立不同圖片樣式效果。 

　　問題

　　透過查看demo能注意到，我們為第一行圖片設定了border-radius 和 內嵌box-shadow。 firefox渲染了圖片的border-radius，但是沒有渲染內嵌box-shadow。 chrome和Safari兩種效果都沒有渲染。 

.normal img {　　
border: solid 5px #000;　　
-webkit-border-radius: 20px;　　
-moz-border-radius: 20px;　　border-radius: 20px;　　
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);　　
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);　　
box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}
登入後複製

firefox效果：

chrome/safari

 

　　變通方案

　　為了讓border-radius 和內嵌box-shadow能夠正常運作，我們需要把圖片轉換成background-image的方式。

 

　　動態方式

　　為了動態完成這項工作，我們需要藉助jquery為每一個圖片加入背景圖片的包裝。下面的js程式碼為每個圖片增加了一個span的包裝，span的背景圖片路徑就是圖片的路徑。

　　程式碼比較簡單，我想就沒有講解的必要了。不清楚了可以直接去查jquery的api。 

<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(){

  $("img").load(function() {
    $(this).wrap(function(){      
    return &#39;<span class="image-wrap &#39; + $(this).attr(&#39;class&#39;) + &#39;" style="position:relative; 
    display:inline-block; background:url(&#39; + $(this).attr(&#39;src&#39;) + &#39;) no-repeat center center; 
    width: &#39; + $(this).width() + &#39;px; height: &#39; + $(this).height() + &#39;px;" />&#39;;
    });
    $(this).css("opacity","0");
  });

});</script>
登入後複製

　　輸出

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

<span class="image-wrap " style="position:relative; 
display:inline-block; background:url(image.jpg) no-repeat center center; 
width: 150px; height: 150px;">
    <img src="image.jpg" style="opacity: 0;">
    </span>
登入後複製

　　圓形圖片

#　　加入我們使用border-radius來實現圓形圖片的圖片

#　　加入我們使用border-radius來實現圓形圖片的效果，效果如下：

　　css：

.circle .image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}
登入後複製

　　卡片風格

　　下面是卡片風格的圖片，使用了多個內嵌box-shadow。

　　css：

.card .image-wrap {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
登入後複製

　　浮雕風格

　　下面是浮雕效果。

　　css：

.embossed .image-wrap {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), 
    inset 0 2px 0 rgba(255,255,255,.5), 
    inset 0 -7px 0 rgba(0,0,0,.6), 
    inset 0 -9px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), 
    inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), 
    inset 0 -9px 0 rgba(255,255,255,.3);
    box-shadow: inset 0 0 2px rgba(0,0,0,.8), 
    inset 0 2px 0 rgba(255,255,255,.5), 
    inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
登入後複製

　　柔性浮雕風格

　　相對於浮雕樣式，新樣式新增了1px blur屬性。

　　css：

.soft-embossed .image-wrap {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), 
    inset 0 2px 1px rgba(255,255,255,.5), 
    inset 0 -9px 2px rgba(0,0,0,.6), 
    inset 0 -12px 2px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), 
    inset 0 2px 1px rgba(255,255,255,.5), 
    inset 0 -9px 2px rgba(0,0,0,.6), 
    inset 0 -12px 2px rgba(255,255,255,.3);
    box-shadow: inset 0 0 4px rgba(0,0,0,1), 
    inset 0 2px 1px rgba(255,255,255,.5), 
    inset 0 -9px 2px rgba(0,0,0,.6), 
    inset 0 -12px 2px rgba(255,255,255,.3);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
登入後複製

　　摳圖風格

　　使用內嵌box-shadow就可以實現摳圖效果。

　　css：

.cut-out .image-wrap {
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 
    inset 0 4px 5px rgba(0,0,0,.6), 
    inset 0 1px 0 rgba(0,0,0,.6);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 
    inset 0 4px 5px rgba(0,0,0,.6), 
    inset 0 1px 0 rgba(0,0,0,.6);
    box-shadow: 0 1px 0 rgba(255,255,255,.2), 
    inset 0 4px 5px rgba(0,0,0,.6), 
    inset 0 1px 0 rgba(0,0,0,.6);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
登入後複製

　　變形和發光

　　在這個例子中我們為圖片包裝添加transition屬性，滑鼠滑過的時候，他會從圓角變成圓形。然後我們使用多個box-shadow實現發光效果。

　　css：

.morphing-glowing .image-wrap {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}.morphing-glowing .image-wrap:hover {
    -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), 
    inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), 
    inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,255,255,.6), 
    inset 0 0 20px rgba(255,255,255,1);

    -webkit-border-radius: 60em;
    -moz-border-radius: 60em;
    border-radius: 60em;
}
登入後複製

　　高光效果

　　高光的效果是透過為元素添加 :after 偽類別實現的。

　　css：

.glossy .image-wrap {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}.glossy .image-wrap:after {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
登入後複製

　　倒影效果

　　在這個例子中，我們將高光效果移到底部就實現倒影效果。

　　css：

.reflection .image-wrap:after {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 30px;
    bottom: -31px;
    left: 0;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), 
    color-stop(100%,rgba(255,255,255,0)));
    background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}.reflection .image-wrap:hover {
    position: relative;
    top: -8px;
}
登入後複製

　　高光和倒影

　　本例我們使用:before 和 :after 將高光和倒影效果組合起來。

　　css：

.glossy-reflection .image-wrap {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}.glossy-reflection .image-wrap:before {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}.glossy-reflection .image-wrap:after {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 30px;
    bottom: -31px;
    left: 0;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
    background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}
登入後複製

　　膠帶風格

　　在這個例子中，我們使用:after來實現膠帶的效果。

css：

.tape .image-wrap {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), 
    inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), 
    inset 0 2px 0 rgba(255,255,255,.3), 
    inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), 
    inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}.tape .image-wrap:after {
    position: absolute;
    content: &#39; &#39;;
    width: 60px;
    height: 25px;
    top: -10px;
    left: 50%;
    margin-left: -30px;
    border: solid 1px rgba(137,130,48,.2);

    background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
    background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}
登入後複製

　　變形和著色　　在這個例子中，我們在元素上使用:after，當滑鼠進過的時候實現

徑向漸層的效果。

　　css：

.morphing-tinting .image-wrap {
    position: relative;

    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}.morphing-tinting .image-wrap:hover {
    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}.morphing-tinting .image-wrap:after {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;

    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}.morphing-tinting .image-wrap:hover:after  {
    background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}
登入後複製

　　羽化邊緣圓形

　　我們同樣可以使用徑向漸層產生遮罩，實現羽化的效果。

###　　css：###
.feather .image-wrap {
    position: relative;

    -webkit-border-radius: 30em;
    -moz-border-radius: 30em;
    border-radius: 30em;
}.feather .image-wrap:after  {
    position: absolute;
    content: &#39; &#39;;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}
登入後複製

 　　浏览器兼容性

　　这种实现方式在大多数支持border-radius, box-shadow, :before and :after特性的浏览器中（例如Chrome, Firefox 和 Safari），都能很好的工作。在不支持新特性的浏览器中，只会显示原始图片。

　　创造你自己的实现

　　借助:before 和:after伪类能为图片创造很多种样式，你可以自己尝试创建出新的效果。

以上是HTML5實作-如何使用css3豐富圖片樣式的詳解（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5，css3，图片样式
來源：php.cn
上一篇：HTML5實踐-實作跨瀏覽器HTML5文字佔位符-placeholder的具體介紹 下一篇：HTML5實作-如何使用css3豐富圖片樣式的詳解（二）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
響應式圖像和文字 Div 並排 所以我試著創建一個模板，其中一個div是圖片，另一個是帶有背景的文字。現在我想讓這個模板響應式，以便文字以特定的px寬度位於圖片下方。透過stackoverflow，我看到無數的帖...
來自於 2024-04-02 08:59:38
0
1
349
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板