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

首页课程实战体系课手记专栏慕课教程

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

来源：6-1 6. border与透明边框

好好学习的好学生

2017-12-13 14:22

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

写回答关注

4回答

榴莲慕斯: 2018-11-16 16:33:48

你可以给小图标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 0

小小军: 2018-10-30 22:41:47

.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 0

小小军: 2018-10-30 22:41:06

<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 0

慕斯卡8008184

2017-12-14 13:00:08

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

0 0

CSS深入理解之border

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

56800 学习 · 73 问题

查看课程

相似问题

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

回答 1

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

回答 2

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

回答 3

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

回答 2

hover与图形变色

回答 2

打开慕课网App查看更多内容