给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成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>
在大多数浏览器中,你可以使用过滤器:
在<img>元素和其他元素的背景图像上 并在CSS中静态设置它们,或者使用JavaScript动态设置它们
请看下面的演示。
< img >元素
你可以把这个技巧应用到<img>元素上:
#original, #changed { 宽度:45%; 填充:2.5%; 浮:左; } #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); } <img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /> <img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
背景图片
你可以把这个技巧应用到背景图像上:
#original, #changed { 背景:url (http://i.stack.imgur.com/kaKzj.jpg); background-size:封面; 宽度:30%; 利润率:0 10% 0 10%; padding-bottom: 28%; 浮:左; } #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); } < div id = "原始" > < / div > < div id = "改变" > < / div >
JavaScript
你可以使用JavaScript在运行时设置一个过滤器:
var element = document.getElementById("changed"); Var过滤器= '色调-旋转(120度)饱和(2.4)'; 元素。Style ['-webkit-filter'] = filter; 元素。Style ['filter'] = filter; #original, #changed { 利润率:0 10%; 宽度:30%; 浮:左; 背景:url (http://i.stack.imgur.com/856IQ.png); background-size:封面; padding-bottom: 25%; } < div id = "原始" > < / div > < div id = "改变" > < / div >
img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG,就像一个模板,那么你可以这样做:
<img src= 'stencil.png' style= 'background-color: red'>
试试这个:
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
为了字面上改变颜色,你可以使用-webkit-filter来合并CSS转换,当有事情发生时,你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?