作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何将图像的一部分变灰?像这样
我正在考虑在绿色图像之上应用带有灰色图像的 svg。有一种方法可以在 svg 中绘制图像,也有一种方法可以绘制分段路径,但是如何将图像包含在路径中?路径 {background: url()} 不起作用
到目前为止,我做到了这一点:
<span class="hp"></span>
<svg width="300" height="300">
<path d="M25,25 L25,0A25,25 0 0,1 43.224215685535285,42.11367764821722 z"/>
</svg>
<style>
.hp {
display: inline-block;
height: 50px;
width: 50px;
background-image: url(http://i.stack.imgur.com/suYdT.png)
}
svg {
position: absolute;
top: 0;
left: 0;
}
path {
background: url (http://i.stack.imgur.com/CWzfS.png)
}
</style>
最佳答案
将剪裁后的变灰图像叠加在原始图像之上。
<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="0 55,25 25,25 0,0 0"></polygon>
</clipPath>
</svg>
<div class="image-container">
<img class="image-grey clip" src="http://i.stack.imgur.com/suYdT.png" />
<img class="image-coloured" src="http://i.stack.imgur.com/suYdT.png" />
</div>
.image-coloured {
z-index: 0;
position: absolute;
}
.image-grey {
z-index: 1;
position: absolute;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.clip {
/*Chrome,Safari*/
-webkit-clip-path: polygon(0px 55px, 25px 25px, 25px 0px, 0px 0px);
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;
charset=utf-8;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTAsNTUgTDI1LDI1IDI1LDAgMCwwIHoiLz4KICA8L2NsaXBQYXRoPgogIDxwYXRoIGlkPSJzdmdNYXNrIiBkPSJNMCw1NSBMMjUsMjUgMjUsMCAwLDAgeiIgIC8+Cjwvc3ZnPg==) no-repeat;
}
从 here 中获取了使图像部分变灰的代码
从 here 生成多边形路径
从 here 获得了跨浏览器的灰度过滤器
关于jquery - 将图像的一部分变灰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24216079/
COW 不是奶牛,是 Copy-On-Write 的缩写,这是一种是复制但也不完全是复制的技术。 一般来说复制就是创建出完全相同的两份,两份是独立的: 但是,有的时候复制这件事没多大必要
我是一名优秀的程序员,十分优秀!