سياه و سفيد كردن عكس

[fahim1384]

سلام لطفا كمك كنيد
من مي خواهم وقتي موس روي يك قسمت مي رود رنگ عكس بك گراند آن سياه و سفيد شود البته اين كارو با فيلتر در css انجام مي دم ولي تمام چيزهايي كه در آن قسمت است مثل رنگ نوشته ها و ... نيز سياه و سفيد مي شود لطفا راهنمايي كنيد كه چطور فقط رنگ عكس بك گراند را سياه و سفيد كنم البته نمي خواهم با تغيير عكس اين كار را انجام دهم

[kohyar]

فکر کنم با JQuery باید انجام بدی

[fahim1384]

لطفا يه راهنمايي بكنيد

[majidnazari65]

سلام. راههای مختلفی (http://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over) داره. ولی در مورد فیلتر در css اون رو فقط به img محدود کنید تا بقیه نوشته ها سیاه و سفید نشن:

.header .logo img.grayscale:hover {
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"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}


.header .logo img.grayscale {
filter: none;
-webkit-filter: grayscale(0%);
}



<img class="grayscale" src="Images/logo.png" style="height:80px;width:60px;">

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

[majidnazari65]

فکر میکنم یک راهش این باشه که فیلتر محتویات اون قسمت رو هم هنگام hover برابر none بذاری.

[fahim1384]

سلام خيلي ممنون
ولي من از img استفاده نميكنم من عكس رو تو خاصيت بك گراند ايميج قرار مي دم و نمي دونم چطور فيلتر رو به بك گراند ايميج محدود كنم و اينكه فيللتر بقيه موارد رو بردارم اين كار و كردم ولي درست نشد يعني فيلتر قسمت نوسته كه لينك است رو none كردم ولي درست نشد

.sl
{
direction:rtl;
list-style: none;
text-align:right;
padding: 7px 25px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
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"); /* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */


}
.sl:hover
{
padding-right:35px;
filter:none;
-webkit-filter:none;
-moz-filter:none;
-ms-filter:none;
-o-filter:none;

}

.sl a:link{
font-size:19px !important;
font-family: BYekan, Tahoma;
color: #068bd7;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
padding: 0 25px 0 0;
filter:none;
-webkit-filter:none;
-moz-filter:none;
-ms-filter:none;
-o-filter:none;
}



<li class="sl" id="c"><a href="">پروژه</a> </li>
بك گراند هم با id="c" اعمال مي شود

[Mag-Mag]

اول کتابخونه JQUERY رو به صفحت اضافه کن
بعد این دستور به کارت میاد :

$('#P').hover(function ()
{
$('#footer').attr("style", "background-color:red;")
})
.mouseout(function () {
$('#footer').attr("style", "background-color:transparent;")
}
)



به جای P شما id اون قسمتی که موس میره روش رو بزار
و بجای footer هم id اون قسمتی که می خوای رنگش با حرکت موس عوض بشه


(ببخشید فک کردم منظورت تغییر رنگ background هست)

[majidnazari65]

بله من هم با اون روش css نتونستم جواب بگیرم. برای -webkit-filter بجای none باید grayscale(0%) بکار ببری (البته باز هم جواب نمیده)
نمیدونم با jquery میشه این کارو کرد یا نه ؟:متفکر:

[fahim1384]

سلام من اين كار و براي منو مي خوام و قسمت li از پايگاه خونده مي شه يعني نام عكس متغييره و براي هر li بكگراند متفاوتي است به همين دليل نمي خواستم از دو عكس متفاوت براي هر قسمت استفاده بكنم بازم ممنون از راهنماييتون