解决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 webview css样式不支持,解决低版本安卓系统中webview对css的background写法不兼容问题...
weixin_32133403的博客
05-26 1686
背景对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。分析首先把原来的代码...
android TextView 支持CSS样式
05-11
### Android TextView 支持CSS样式详解 #### 一、引言 在Android开发过程中，为了增强界面的表现力和可维护性，开发者常常需要利用到HTML和CSS的技术来丰富`TextView`的内容展示。虽然原生的Android SDK并没有直接...
【vue项目】引入组件里的img格式样式不显示
weixin_45650440的博客
03-14 1659
组件 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
img标签图像加载失败显示默认样式
qq_43224247的博客
11-23 5210
&lt;img id="pic" src="url地址" alt="图片"/&gt; 思路一：$("#pic").one("error",function(){                      $("#pic").attr("src","默认url地址");               });//此时默认图片也加载失败
img标签 使用 margin : 0 auto 无效
god_wen的博客
12-24 6205
因为img 是内联元素，想要使用mmargin : 0 auto 前必须转换为块元素img{display:block}
html[Attributes Style]什么意思
gao_zhennan的博客
08-07 2578
本文介绍了Attributes Style的含义，以及-webkit-locale的作用。
CSS 控制页面样式的4种方式和优先级问题
09-25
"CSS 控制页面样式的4种方式和优先级问题" CSS 控制页面样式的四种方式是指在 HTML 页面中应用 CSS 样式的四种方法，它们分别是行内方式、内嵌方式、链接方式和导入方式。这些方式的应用可以使得页面样式变得丰富...
SpringMVC js/css/img 静态资源失效解决方法 及 Ajax请求失效
读书札记2022的博客
03-20 286
因为我们在web.xml配置了前端控制器，拦截了所有请求，所以要 在SpringMVC核心配置文件springmvc.xml里开启请求： <!--开启前端控制器不能拦截的静态资源--> <mvc:resources location="/css/" mapping="/css/**" /> <mvc:resources location="/js/" mapping="/js/**" /> <mvc:resources locatio
10个最常用的CSS className
南三方---网站设计开发录
07-24 676
 很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。　　1.class=”fixed”　　fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素
3.控制类名（className 属性）
weixin_33966095的博客
03-06 415
className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变className： 结果: 转载于:https://www.cnblogs.c...
react的img标签路径方式
Sixology的博客
07-28 1335
用import引入 import img from '../../static/images/topbanner.jpg' 使用： <img className='banner-img' src={img}/>
js添加className
6块腹肌的博客
12-17 696
let img = document.createElement('img') img.className = 'animation'
css 设置头像图片不变形
weixin_30340353的博客
07-15 1117
css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了 转载于:https://www.cnblogs.com/ybixian/p/11191212.html
CSS中的Img样式
邱明
08-17 1844
一、基础代码 &lt;IMG src="/picture/css20080501.jpg" width=224&gt; 二、加边框 1、普通黑色边框（浏览器默认黑色） &lt;img src="/picture/css20080501.jpg" width=224 border=12&gt; 2、简单的CSS装饰框 ①&lt;img sr...
display none的元素重新展示如何撑开页面_如何解决img标签下面的小空隙
weixin_39928102的博客
11-29 117
千锋HTML5学院：margin自述很多初学小伙伴在写页面的时候碰到过一个问题，当我们用一个div直接包裹img，img的下方会出现3px间距，如图代码：<!DOCTYPE html> 那原因是什么呢？img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），导致下方会多出来 3px 间距，其实我们在img右侧添加一个span包裹住文本，现象会更明显有五个办...
CSS样式实现图片渐变阴影效果技巧
资源摘要信息:"CSS样式表是网页设计和开发中不可或缺的技术之一，它允许开发者对网页的外观和布局进行控制。在本资源中，我们将探讨使用CSS样式表给图片添加阴影效果的方法，特别是对于不固定尺寸的图片，我们将学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值