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

最新推荐文章于 2022-08-07 09:03:23 发布
最新推荐文章于 2022-08-07 09:03:23 发布
阅读量3.5k 收藏
点赞数 1
分类专栏： JavaScript CSS 文章标签： css class transition div border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiancm2001/article/details/7980938
版权

主要参考：

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; width:" + 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样式兼容请自行测试。）

ChromeFirefox (Gecko)Internet ExplorerOperaSafari
0.2+1.0 (1.7 or earlier)+9.0+9.0+3.1+





简生
关注
专栏目录
android TextView 支持CSS样式
05-11
### Android TextView 支持CSS样式详解 #### 一、引言 在Android开发过程中，为了增强界面的表现力和可维护性，开发者常常需要利用到HTML和CSS的技术来丰富`TextView`的内容展示。虽然原生的Android SDK并没有直接...
【vue项目】引入组件里的img格式样式不显示
weixin_45650440的博客
03-14 1644
组件 TarBarItem.vue <style scoped> .tab-bar-item img { width: 24px; height: 24px; margin-top: 3px; vertical-align: middle; } correct 把css里的scoped干掉 <style > .tab-bar-item img { width: 24px; height: 24px; margin-to
html[Attributes Style]什么意思
gao_zhennan的博客
08-07 2486
本文介绍了Attributes Style的含义，以及-webkit-locale的作用。
linux下 php img 图片无法显示
风声世界的专栏
11-23 4397
 将php服务器架到linux下时没有注意该问题，前几天倒是碰到了在linux下验证码的图片无法显示的情况，发现linux下也要有gd库的支持，于是安装了php5-gd（本人使用的是php5），这个问题解决了今天突然发现img图片无法显示，上网搜了一把，又经过测试得出如下结论他会以当前路径为搜索路径，来搜索pc.jpg图片，假若你用绝对路径，在这会进入陷阱假若当前路径是/v
html怎么设置img样式,img 元素可以用 CSS 设置样式吗?
weixin_32391045的博客
06-11 8263
img 元素可以用 CSS 设置样式吗?img 元素可以用 CSS 设置样式. 下面本篇文章介绍一下 CSS 对于 < img > 图片的常见操作. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.一, CSS 控制 img 图片的尺寸img{width:120px;height:100px;}上述代码设置 img 图片长宽分别为 120px 与 100px.但是需...
CSS 控制页面样式的4种方式和优先级问题
09-25
"CSS 控制页面样式的4种方式和优先级问题" CSS 控制页面样式的四种方式是指在 HTML 页面中应用 CSS 样式的四种方法，它们分别是行内方式、内嵌方式、链接方式和导入方式。这些方式的应用可以使得页面样式变得丰富...
CSS解决文字环绕图片问题
09-27
但基础的`float`属性足以应对大部分简单的文字环绕图片的需求。 总之，通过CSS的`float`属性，我们可以轻松地实现类似Word中的文字环绕图片效果，提高网页设计的灵活性和用户体验。合理使用CSS，可以让我们在不增加...
使用css样式实现动态图片裁剪示例
09-25
本示例将详细介绍如何利用CSS样式实现动态图片裁剪。 首先，我们来看一下给定的代码片段。这段HTML代码包含一个`div`元素，其class为"crop"，内部嵌套了一个`img`元素。`div.crop`设置了一些关键的CSS属性，如`...
react的img标签路径方式
Sixology的博客
07-28 1315
用import引入 import img from '../../static/images/topbanner.jpg' 使用： <img className='banner-img' src={img}/>
js添加className
6块腹肌的博客
12-17 686
let img = document.createElement('img') img.className = 'animation'
给img添加类名可以动态切换图片
weixin_30249203的博客
05-19 741
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .imgname{ content:url("../img/0000.jpg"); ...
3.控制类名（className 属性）
weixin_33966095的博客
03-06 403
className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变className： 结果: 转载于:https://www.cnblogs.c...
10个最常用的CSS className
南三方---网站设计开发录
07-24 664
 很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。　　1.class=”fixed”　　fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素
优化打印体验：创建有效的打印CSS样式
在Web设计中，虽然大部分关注点通常集中在屏幕显示上，但考虑用户可能需要将网页内容打印出来的情况同样至关重要。为了优化打印体验，Web开发者可以利用CSS来定制打印样式，确保打印版面清晰、整洁，易于阅读。 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值