                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之border

还是搞不清楚怎么改变png图片颜色？，老师的代码也运行不起

求助~谁写好了吗，可以看下代码吗w(ﾟДﾟ)w

好好学习的好学生

2017-12-13

源自：CSS深入理解之border 6-1

关注问题我要回答

3642

操作

收起

4 回答

榴莲慕斯
2018-11-16

你可以给小图标icon的外面加一个div，设置和小图标一样的宽高，如20px，并设置overflow:hidden;试一下

<!doctype html>
<html>
<head>
<style type="text/css">
div {	
    width: 20px;
    height: 20px;
    overflow: hidden;
}
img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(20px 0 pink);
    position: relative;
    left: -20px;
    border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div>
    <img src="xxx.png" alt="">
</div>
</body>
</html>

0 回复有任何疑惑可以回复我~

小小军
2018-10-30

.warp {
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.icon {
    position: relative;
    left: -32px;
    border-right: 32px solid transparent;
    filter: drop-shadow(32px 0 #00ff00);
}

<div class="warp"><img src="clear.png" alt="" class="icon"></div>

测试了没问题

0 回复有任何疑惑可以回复我~

小小军
2018-10-30

<div class="warp"><img src="clear.png" alt="" class="icon"></div>

.icon {
    position: relative;
    left: -32px;
    border-right: 32px solid transparent;
    filter: drop-shadow(32px 0 #00ff00);
}

测试了没问题

0 回复有任何疑惑可以回复我~

慕斯卡8008184
2017-12-14

和老师讲的一样,但是要确认一下你的图片是否带有透明区域.有的图片虽然是png图片,但是没有透明区域.要用浏览器打开看.

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之border

参与学习 56801 人
解答问题 73 个

深入讲解border使用方法及应用，以及如何借助border完成布局

本课相似问答

1 回答border-style: inset; 怎么设置它的边框颜色呢？之前的属性都可以直接用color加颜色改变

2 回答box的border有颜色，left浮过去被遮住了，relative的z-index有不起作用，怎么办

3 回答为什么写出来的颜色不显示？

2 回答但复选框按钮的颜色是怎么设置的呢？

2 回答hover与图形变色

搜索更多本课相关问答

还是搞不清楚怎么改变png图片颜色？，老师的代码也运行不起

我要回答关注问题

意见反馈帮助中心 APP下载