zoukankan      html  css  js  c++  java

  • 解决img对大部分CSS样式不支持的问题

    主要参考：

    http://webdesignerwall.com/demo/css3-image-styles/

    http://www.qianduan.net/css3-image-styles.html

    详情到上面两个连接看。

    主要自己整理一下，顺便把jQuery的代码专为JavaScript，做个备忘。

    DEMO:http://jsfiddle.net/QkRKC/embedded/result/

    代码:

    <!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script>  
    function changeImg(e) {  
        var img = e.target,  
            imageWarp = document.createElement("span");  
        imageWarp.className = "image-wrap " + img.className;  
        imageWarp.style.cssText = "position:relative; display:inline-block; background:url(" +  img.src   
            + ") no-repeat center center; " + img.width + "px; height:" + img.height + "px;"  
        img.insertAdjacentElement("beforebegin", imageWarp);  
        imageWarp.appendChild(img);  
    }  
  
    document.addEventListener("DOMContentLoaded", function() {  
        var imgs = document.querySelectorAll("img"),  
        length = imgs.length;  
          
        for(var i = 0; i < length; i++) {  
            imgs[i].style.opacity = 0;  
            imgs[i].onload = changeImg;  
        }  
    }, false);  
</script>  
<style>  
    body {  
        width:480px;  
        margin:0 auto;  
    }  
    div {  
        text-align:center;  
        margin-bottom:20px  
    }  
  
    /* NORMAL */  
    .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);  
    }  
  
    /* CIRCLE */  
    .circle .image-wrap {  
        -webkit-border-radius: 50em;  
        -moz-border-radius: 50em;  
        border-radius: 50em;  
    }  
  
    /* PHOTO */  
    .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;  
    }  
  
    /* EMBOSSED */  
    .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;  
    }  
  
    /* SOFT EMBOSSED */  
    .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;  
    }  
  
    /* CUTOUT */  
    .cutout {  
        background: #222;  
        padding: 20px 40px 50px;  
        color: #fff;  
        -webkit-border-radius: 20px;  
        -moz-border-radius: 20px;  
        border-radius: 20px;  
    }  
    .cutout .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: 30em;  
        -moz-border-radius: 30em;  
        border-radius: 30em;  
    }  
  
    /* MORPHING + GLOWING */  
    .morphing-glowing {  
        background: #222;  
        padding: 20px 40px 50px;  
        color: #fff;  
        -webkit-border-radius: 20px;  
        -moz-border-radius: 20px;  
        border-radius: 20px;  
    }  
    .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;  
    }  
  
    /* GLOSSY */  
    .glossy {  
        background: #222;  
        padding: 20px 40px 50px;  
        color: #fff;  
        -webkit-border-radius: 20px;  
        -moz-border-radius: 20px;  
        border-radius: 20px;  
    }  
    .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: ' ';  
        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%);  
    }  
  
    /* REFLECTION */  
    .reflection .image-wrap {  
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);  
        -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);  
        box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);  
        -webkit-transition: .5s;  
        -moz-transition: .5s;  
        transition: .5s;  
        -webkit-border-radius: 20px;  
        -moz-border-radius: 20px;  
        border-radius: 20px;  
    }  
    .reflection .image-wrap:after {  
        position: absolute;  
        content: ' ';  
        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;  
    }  
  
    /* GLOSSY + REFLECTION */  
    .glossy-reflection {  
        background: #000;  
        padding: 20px 40px 50px;  
        color: #fff;  
        -webkit-border-radius: 20px;  
        -moz-border-radius: 20px;  
        border-radius: 20px;  
    }  
    .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: ' ';  
        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: ' ';  
        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%);  
    }  
  
    /* TAPE */  
    .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: ' ';  
        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);  
    }  
  
    /* MORPHING & TINTING */  
    .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: ' ';  
        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);  
    }  
  
    /* FEATHER */  
    .feather .image-wrap {  
        position: relative;  
        -webkit-border-radius: 30em;  
        -moz-border-radius: 30em;  
        border-radius: 30em;  
    }  
    .feather .image-wrap:after  {  
        position: absolute;  
        content: ' ';  
        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);  
    }</style>  
</head>  
<body>  
    <div class="circle"><h3>circle:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="card"><h3>card:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="embossed"><h3>embossed:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="soft-embossed"><h3>soft-embossed:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="cut-out"><h3>cutout:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="morphing-glowing"><h3>morphing-glowing:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="glossy"><h3>glossy:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="reflection"><h3>reflection:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="glossy-reflection"><h3>glossy-reflection:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="tape"><h3>tape:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="morphing-tinting"><h3>morphing-tinting:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
    <div class="feather"><h3>feather:</h3><img class="imgStle1" src="http://lorempixel.com/200/200/"/></div>  
</body>  
</html>

    最后：

    因为用了DOMContentLoaded事件，在浏览器支持情况如下。（css样式兼容请自行测试。）

    Chrome Firefox (Gecko) Internet Explorer Opera Safari
    0.2+ 1.0 (1.7 or earlier)+ 9.0+ 9.0+ 3.1+
  • 相关阅读:
    进程和线程
    yum安装apache后更改worker模式
    （转）top命令详解
    虚拟机linux在关机不正常的情况下出现的问题
    mysql赋予用户权限grant all privileges on
    lampp自带mysql远程访问问题
    扫盲
    linux常用命令使用
    剑指Offer对答如流系列
    剑指Offer对答如流系列
  • 原文地址：https://www.cnblogs.com/maplejan/p/2774104.html
Copyright © 2011-2022 走看看