سیاه و سفید تصویر کردن با css

[iMacs]

سلام
امروز میخوام چند تا با استفاده از CSS و یک خط کد تصاویر رنگی و به سیاه و سفید تبدیل کنیم
برای تبدیل تصاویر رنگی به سیاه و سفید از 3 فیلتر استفاده می کنیم استاندارد برای Webkit و SVG برای فایرفاکس و Microsoft فیلتر برای IE:

[LEFT]Firefox
-moz-filter: grayscale(1);


Opera
 -o-filter: grayscale(1);
 
 
Google Chrome
 -webkit-filter: grayscale(1);


Internet Explorer
-ms-filter: grayscale(1);
/* IE 6 */
filter: gray;
[/LEFT]

منبع : iMind.ir

 

[kassit]

به این سادگی ها هم نیست دوست عزیز علت هم اینه که webkit دیگه از فیلتر پشتیبانی نمی کنه.
اما باز هم یه راه حل وجود داره. برای این کار می شه یه فایل svg بسازیم که محتوایاتش به شکل زیره:

filters.svg:
[HTMLS]
<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>
[/HTMLS]

بعد می تونیم یه همچین CSS ی داشته باشیم:
[CSSS]
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
[/CSSS]

​

 

[tarenoco]

میشه برای اینکه این سیاه و سفید کردن رو بصورت هاور استفاده کنیم هم توضیحی بدید

 

[tarenoco]

من یه فایل عکس دارم که دو قسمت کردم قسمت بالایی سیاه و سفید و پایینی رنگی هست

میخوام جوری باشه که تو سایت قسمت سیاه و سفید رو نشون بده و وقتی موس روش رفت تبدیل به رنگی بشه

چطوری باید این کار رو انجام بدم