ایجاد blur به منطقه ای از تصویردر Body

[m3hdi 15]

سلام.

من یه صفحه دارم که درون Body خودم یک بکگراند منظره قرار دادم و بعدش از اون سمت یک باکس با کلاس wrapper ایجاد کردم که آیتمهای مربوط به فرمهام و پست هام درون اون قرار بگیره .

تصویر زیر دقیقا نمونه اون صفحه ای هستش که داریم .

[ATTACH=CONFIG]7825[/ATTACH]

موضوع اینجاست که این بکگراند من که یک منظره هستش میخوام دقیقا پشت قسمت wrapper اون به حالت blur قرار بگیره . حالا از طریق کدهای CSS یا جی کوئری هم که شده مشکل نیست .

صفحه wrapper من هم دقیقا اندازه 800px در 600px می باشد .

[Masood Ashoori 232]

درود مهدی جان . چطوری ?

این صفحه هارو نگاه بنداز

html - Can I apply CSS(3) filters ONLY on image sections? - Stack Overflow

html - <div> blur of part of Backgroung image with css - Stack Overflow

[m3hdi 15]

سلام مسعود جان . خوبم و ممنون بابت لینکهات .

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

با بررسی کدهای مربوط به سایت یاهو میل به این نتیجه رسیدم که یاهو از دو تصویر استفاده می کنه . یکی که حالت شفاف داره برای کل زمینه و اون یکی که حالت blur داره برای اون قسمت wrapper سایت استفاده می کنه .

دارم بررسی می کنم ببینم میشه کاری کردش که با کلیک بروی یک زمینه به صورت user frindly بودن توسط کاربر ، قسمت Wrapper مربوط به عکس هم بروی قسمت wrapper لود بشود .

[m3hdi 15]

این مشکل تا حدودی برطرف کردم . دو تا بکگراند تعریف کردم که یکی مربوط میشه به Body و دیگر مربوط میشه به بخش wrapper که حالت کمی blur داره .

حالا من این امکان به کاربر دادم که مثل یاهو ایمیل بکگراند مورد نظر خودش رو انتخاب کنه و پس از انتخاب بکگراند مورد نظر کاربر که بر روی body اعمال می شود می خوام دقیقا عین همون بکگراند به صورت blur شده بروی زمینه wrapper من هم اعمال بشه .

بکگراندهایی که باید توسط کاربر انتخاب بشود ، به صورت لیستی درون سایت قرار دادم به صورت زیر هستش:

<div id="thumb">
	<ul>
		<li><img src="images/bg/thumbnail/pic1.jpg"  width="80" height="44" dir="images/bg/pic1.jpg"></li>
		<li><img src="images/bg/thumbnail/pic2.jpg"  width="80" height="44" dir="images/bg/pic2.jpg"></li>
		<li><img src="images/bg/thumbnail/pic3.jpg"  width="80" height="44" dir="images/bg/pic3.jpg"></li>
		<li><img src="images/bg/thumbnail/pic4.jpg"  width="80" height="44" dir="images/bg/pic4.jpg"></li>
		<li><img src="images/bg/thumbnail/pic5.jpg"  width="80" height="44" dir="images/bg/pic5.jpg"></li>
		<li><img src="images/bg/thumbnail/pic6.jpg"  width="80" height="44" dir="images/bg/pic6.jpg"></li>
		<li><img src="images/bg/thumbnail/pic7.jpg"  width="80" height="44" dir="images/bg/pic7.jpg"></li>
		<li><img src="images/bg/thumbnail/pic8.jpg"  width="80" height="44" dir="images/bg/pic8.jpg"></li>
		<li><img src="images/bg/thumbnail/pic9.jpg"  width="80" height="44" dir="images/bg/pic9.jpg"></li>
		<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/pic10.jpg"></li>
	</ul>
</div>

حالا درون همون صفحه هم بکگراند های محو blur خودم رو نیز به صورت زیر قرار دادم :

<div class="blur">
		<ul>
			<li><img src="images/bg/thumbnail/pic1.jpg"  width="80" height="44" dir="images/bg/blur/pic1.jpg"></li>
			<li><img src="images/bg/thumbnail/pic2.jpg"  width="80" height="44" dir="images/bg/blur/pic2.jpg"></li>
			<li><img src="images/bg/thumbnail/pic3.jpg"  width="80" height="44" dir="images/bg/blur/pic3.jpg"></li>
			<li><img src="images/bg/thumbnail/pic4.jpg"  width="80" height="44" dir="images/bg/blur/pic4.jpg"></li>
			<li><img src="images/bg/thumbnail/pic5.jpg"  width="80" height="44" dir="images/bg/blur/pic5.jpg"></li>
			<li><img src="images/bg/thumbnail/pic6.jpg"  width="80" height="44" dir="images/bg/blur/pic6.jpg"></li>
			<li><img src="images/bg/thumbnail/pic7.jpg"  width="80" height="44" dir="images/bg/blur/pic7.jpg"></li>
			<li><img src="images/bg/thumbnail/pic8.jpg"  width="80" height="44" dir="images/bg/blur/pic8.jpg"></li>
			<li><img src="images/bg/thumbnail/pic9.jpg"  width="80" height="44" dir="images/bg/blur/pic9.jpg"></li>
			<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/blur/pic10.jpg"></li>
		</ul>
	</div>

همانطور که در مسیر Dir قالب مشاهده می کنید مسیر بکگراندهای blur داده شده من در مسیر images/bg/blur/ قرار دارد .

با استفاده از کد جی کوئری که تو یک مثالی گیر آوردم درباره body سایت اومده و بهش به صورت زیر گفته درصورتی که بروی هر کدوم از المان های تصویر داخل کلاس thumb کلیک کردش ، دقیقا مثل همون عکس و با استفاده از مسیرش تصویر بکگراند تغییر بده .

$('#thumb li img').click(function(){

		var imgbg = $(this).attr('dir');
		$('#bg').css({backgroundImage: "url("+imgbg+")"});
	});
	$('#bgimage').click(function(){
	$('#thumb').hide();
});

حالا دقیقا می خوام با استفاده از این کدها بهش بگم که وقتی بروی عکس های تصویر کلاس thumb کلیک کردن بکگراند مربوط به wrapper من هم با استفاده از عکسهایی که در کلاس blur قرار داره تغییر بکنه .

کدی که نوشتم به صورت زیر هستش ولی عمل نمیکنه :پ

$('#thumb li img').click(function(){	
	var imgbgblur = $('#blur li img').attr('dir');
	$('.wrapper').css({backgroundImage: "url("+imgbgblur+")"});
});
$('#bgimage').click(function(){
$('#thumb').hide();
});

در کل کدهای مربوط به HTML صفحه ام هم به صورت زیر هستش »

<body id="bg">
<div id="bgimage"></div> 

<div id="menu"><img src="images/bgclick.png"></div>

	<div id="thumb">
		<ul>
			<li><img src="images/bg/thumbnail/pic1.jpg"  width="80" height="44" dir="images/bg/pic1.jpg"></li>
			<li><img src="images/bg/thumbnail/pic2.jpg"  width="80" height="44" dir="images/bg/pic2.jpg"></li>
			<li><img src="images/bg/thumbnail/pic3.jpg"  width="80" height="44" dir="images/bg/pic3.jpg"></li>
			<li><img src="images/bg/thumbnail/pic4.jpg"  width="80" height="44" dir="images/bg/pic4.jpg"></li>
			<li><img src="images/bg/thumbnail/pic5.jpg"  width="80" height="44" dir="images/bg/pic5.jpg"></li>
			<li><img src="images/bg/thumbnail/pic6.jpg"  width="80" height="44" dir="images/bg/pic6.jpg"></li>
			<li><img src="images/bg/thumbnail/pic7.jpg"  width="80" height="44" dir="images/bg/pic7.jpg"></li>
			<li><img src="images/bg/thumbnail/pic8.jpg"  width="80" height="44" dir="images/bg/pic8.jpg"></li>
			<li><img src="images/bg/thumbnail/pic9.jpg"  width="80" height="44" dir="images/bg/pic9.jpg"></li>
			<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/pic10.jpg"></li>
		</ul>
	</div>

	<div class="blur">
		<ul>
			<li><img src="images/bg/thumbnail/pic1.jpg"  width="80" height="44" dir="images/bg/blur/pic1.jpg"></li>
			<li><img src="images/bg/thumbnail/pic2.jpg"  width="80" height="44" dir="images/bg/blur/pic2.jpg"></li>
			<li><img src="images/bg/thumbnail/pic3.jpg"  width="80" height="44" dir="images/bg/blur/pic3.jpg"></li>
			<li><img src="images/bg/thumbnail/pic4.jpg"  width="80" height="44" dir="images/bg/blur/pic4.jpg"></li>
			<li><img src="images/bg/thumbnail/pic5.jpg"  width="80" height="44" dir="images/bg/blur/pic5.jpg"></li>
			<li><img src="images/bg/thumbnail/pic6.jpg"  width="80" height="44" dir="images/bg/blur/pic6.jpg"></li>
			<li><img src="images/bg/thumbnail/pic7.jpg"  width="80" height="44" dir="images/bg/blur/pic7.jpg"></li>
			<li><img src="images/bg/thumbnail/pic8.jpg"  width="80" height="44" dir="images/bg/blur/pic8.jpg"></li>
			<li><img src="images/bg/thumbnail/pic9.jpg"  width="80" height="44" dir="images/bg/blur/pic9.jpg"></li>
			<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/blur/pic10.jpg"></li>
		</ul>
	</div>

<header class="header">

</header>

<div class="wrapper">

</div>


</body>