给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
回答是因为我在寻找解决办法。
如果你的背景是白色或黑色,@chrscblls回答中的钢笔效果很好,但我的不是。此外,这些图像是用ng-repeat生成的,所以我不能在我的css中有他们的url,而且你不能在img标签上使用::after。
所以,我想了一个变通的办法,如果人们在这里也跌倒了,我想它可能会帮助到他们。
所以我所做的几乎是一样的,只有三个主要区别:
url是在我的img标签,我把它(和一个标签)在另一个div::后将工作。 “混合-混合模式”设置为“差”,而不是“相乘”或“筛选”。 我用完全相同的值添加了一个::before,因此::after将执行::before所做的'difference'的'difference',并取消它-self。
要改变它从黑色到白色或白色到黑色的背景颜色需要是白色。 从黑色到彩色,你可以选择任何颜色。 从白色到彩色,你需要选择你想要的颜色相反的颜色。
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
https://codepen.io/spaceplant/pen/oZyMYG
因为我张贴了这个答案,我用不同的方法制作了另一支笔:
* { box-sizing: border-box; } body { background-color: CadetBlue; font-family: "Lato", sans-serif; text-align: center; } button { display: flex; justify-content: center; min-width: 182px; padding: 0.5em 1em; margin: 2em auto; cursor: pointer; pointer-events: auto; border-radius: 4px; border: none; background: #85b5b7; box-shadow: 0 6px #6fa8aa; } label { font-weight: 400; font-size: 24px; margin: auto 0; color: white; } .icon { height: 64px; width: 64px; background-color: white; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 48px; mask-size: auto 48px; mask-mode: luminance; -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); } button label span { color: #395f60; } button:hover { color: #395f60; transform: translatey(4px); box-shadow: 0 2px #6fa8aa; } button:hover .icon { background-color: #395f60; } <button> <div class="icon"></div> <label> white to <span>color</span></label> </button>
其他回答
为了字面上改变颜色,你可以使用-webkit-filter来合并CSS转换,当有事情发生时,你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG,并将特定的颜色更改为透明(如裁剪),并使用CSS更改背景颜色。
最简单的一句话对我很管用:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
您可以将不透明度从0调整到1,以使颜色更亮或更暗。
我需要一个特定的颜色,所以滤镜不适合我。
相反,我创建了一个div,利用CSS多个背景图像和线性梯度函数(它自己创建图像)。如果你使用叠加混合模式,你的实际图像将与生成的“渐变”图像混合,包含你想要的颜色(这里,#BADA55)
.colored-image { background-image: linear-gradient(向右,#BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode:覆盖; background-size:包含; 宽度:200 px; 身高:200 px; } < div class = "的" > < / div >
对我来说有效的解决方案是使用滤镜:投影
滤镜:水滴阴影的工作方式不同于常规的盒子阴影。
滤镜将阴影应用于真实形状(因此它支持透明图像)。
现在的技巧是“隐藏”真实的图像,只显示阴影。
https://jsfiddle.net/d4m8x0qb/2
请注意,我的用例是将图标的颜色修改为一种纯色,所以这种方法适合我,但可能不适用于其他用例
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?