CSS3- img标签content属性url修改遇到的坑

最新推荐文章于 2022-04-24 13:16:49 发布

Skime Ma

最新推荐文章于 2022-04-24 13:16:49 发布

阅读量2.3k

点赞数 1

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/weixin_44622984/article/details/109196888

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在做网页的时候,需要动态修改icon,然后发现了img标签在样式中使用content属性的url可以进行修改起图片引用地址以达到修改的目的,但是使用了之后发现了坑,好像只有Chrome浏览器支持,FF等好多其它浏览器都不能支持这种方式.

<style>
    body{
        display:flex;
        justify-content:space-around;
    }
    div{
        width:300px;
        height:300px;
        margin: 30px auto 0;
        background-color:#848484;
        text-align:center;
    }
    div:first-child > img{
        content:url('./baby.jpg')
    }
</style>

<body>
    <div class="img-box-1">
        <p>图片1</p>
        <img src="./star.jpg" alt="">
    </div>
    <div class="img-box-1">
        <p>图片2</p>
        <img src="./star.jpg" alt="">
    </div>
</body>

Chrome浏览器效果
谷歌浏览器-成功修改图片
Firefox浏览器效果
火狐浏览器-无效修改
Microsoft Edge浏览器效果
Microsoft Edge浏览器-成功修改
安全起见还是用js动态改变img的src属性来吧

Skime Ma

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3- img标签content属性url修改遇到的坑

最近在做网页的时候,需要动态修改icon,然后发现了img标签在样式中使用content属性的url可以进行修改起图片引用地址以达到修改的目的,但是使用了之后发现了坑,好像只有Chrome浏览器支持,FF等好多其它浏览器都不能支持这种方式.<style> body{ display:flex; justify-content:space-around; } div{ width:300px; height:
复制链接

扫一扫