如何在HTML中改变一张不规则图片的颜色

在网页中贴入一张不规则的图片,然后通过选取不同的rgb值给这张图片填充不同的颜色,图片如图:这是一张衣领的图片

css

2个回答

模拟了一下

 <!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <style>
        #content{
            padding: 0;
            margin: 0;
            height: 150px;
            width: 150px;
            overflow: hidden;
            position: relative;
        }
        img:hover{
            padding: 0;
            margin: 0;
            top: -91px;
            position: absolute;
                        -webkit-filter: drop-shadow(0px 91px 0px tomato);
            filter: drop-shadow(0px 91px 0px tomato);
        }
        img:active{
            padding: 0;
            margin: 0;
            top: -91px;
            position: absolute;
                        -webkit-filter: drop-shadow(0px 91px 0px blue);
            filter: drop-shadow(0px 91px 0px blue);
        }
    </style>
</head>
<body>
<div id="content">
    <img src="https://img-ask.csdn.net/upload/201707/07/1499422649_973182.png" alt="这是一张衣领的图片" style="max-width:100%;">
</div>
</body>
</html>
github_37125043
CN-cheng 回复Rock_Lu95: ^_^
3 年多之前 回复
Rock_Lu95
Rock_Lu95 回复github_37125043: 已经解决了,用canvas画的,谢谢啦
3 年多之前 回复
github_37125043
CN-cheng 回复Rock_Lu95: 我的理解是这样,因为你的图时获取的png图,如果是自己画的(如:canvas、svg),这样比较好改变颜色
3 年多之前 回复
Rock_Lu95
Rock_Lu95 回复UIOT: 现在只能将img上移出到看不到的地方,将阴影下移到原来img的位置上来实现
3 年多之前 回复
Rock_Lu95
Rock_Lu95 回复UIOT:这样的阴影效果我做出来后,必须要显示原图,img向上挪动,阴影向下挪动显示不完全啊
3 年多之前 回复
github_37125043
CN-cheng 在指向图和点击图时会变颜色
3 年多之前 回复

不可能吧,你要是svg或是canvas可以

Rock_Lu95
Rock_Lu95 使用canvas drawimage 画出来的图片改变了背景,但是上层的图片只能看出边框的颜色变了
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐