چگونه می توانTable Background را transparent کرد؟

nazli.m

New Member
من یک صفحه ساختم که background آن یک عکس است و به یکی از table ها رنگ طوسی داده ام. می خواستم رنگ این table کمی transparent شه که هم رنگ خودش دیده بشه هم عکس background. این کارو تونستم از طریق css انجام بدم، ولی مشکل اینه که اگه داخل این table عکس بگذارم یا متنی بنویسم، آنها هم transparent میشن.
این را هم امتحان کردم که عکس و متن رو در یک table دیگه که داخل همان table ساختم قرار بدهم ولی فرقی نمی کند.:shock:
این یک نمونه website است که دقیقا متوجه منظور من بشید: www.muse.mu
در قسمت Latest News می تونین ببینین که عکس ها و متن ها transparent نشده اند.
و نمونه ای که خودم برای تست ساخته ام هم پیوست می کنم.
واقعا نجاتم می دین اگه بتونین این مشکل رو حل کنین که عکس ها و متن ها ثابت بمونن و فقط رنگ table زیری transparent بشه.
ممنونم.
 

پیوست ها

  • trans.rar
    50.4 کیلوبایت · بازدیدها: 11

echessdesign

مدیر انجمن طراحی وب
درود بر شما
با انجمن خوش آمدید
می توانید این خصیصه های CSS را به Style خانه جدول مورد نظر خود بیفزایید:
HTML:
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;

سوالی داشتید بفرمایید.
پاینده باشید
 

nazli.m

New Member
سلام ممنون از جواب شما.
من دقیقا از همین کدها استفاده کرده ام قبلا. اگر به نمونه ای که پیوست کرده ام نگاه بندازین متوجه می شین. مشکل اینه که اگر عکس یا نوشته ای داخل آن جدولی که opacity به آن داده ام بگذارم آنها هم transparent می شوند. من احتیاج دارم که عکسها و نوشته ها transparent نشوند. اگر راه حلی برای این موضوع دارین ممنون می شم از راهنماییتون.
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
توجه بفرمایید زمانی که خصیصه opacity را به یک تگ مادر اختصاص می دهید، تمامی تگ های فرزند آن را به ارث می برند. در نتیجه این در خواست شما با روشی که در نظر دارید ،قابل اجرا نیست.
لطفا به روش بنده توجه فرمایید:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.echessdesign.com</title>
<style type="text/css">
.opacity{
background:gray url('44.jpg') repeat;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
.noOpacity{
position:absolute;
left:0;
top:0;
}

</style>

</head>

<body>

<table style="width: 100%; height:500px">
	<tr>
		<td>
			<div class="opacity" style="height:400px;">
			</div>
			<div class="noOpacity">
					<img src="44.jpg"  class="noOpacity" />
					<span  class="noOpacity">www.echessdesign.com</span>
				</div>

		</td>
	</tr>
</table>

</body>

</html>
 

nazli.m

New Member
ممنون، کاری که شما گفتین رو انجام دادم، و اون مشکل حل شد. اما الان یک مشکل دیگه بوجود آمده: اگر بخواهم که قسمتی که transparent نیست دقیقا وسط و روی قسمتی قرار بگیرد که transparent است، چی کار می تونم بکنم؟
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
اگر خانه جدول مورد نظر شما، طول ثابت دارد (بر حسب پیکسل هست) و طول متغیر ندارد (بر حسب در صد نباشد) آنگاه شما می توانید با تغییر مقدار های top: و left: به خواسته خود دست پیدا کنید.
(در نظر داشته باشید که مخترع چنین افکت هایی، مایکروسافت بود - microsoft style filter - و در نسخه قدیمی سایت خودش، از چنین افکت هایی که آن زمان، مرورگر خودش از آن پشتیبانی می کرد، استفاده می کرد.)
در نظر دارید که مایکروسافت در نسخه جدید سایت خودش، چندان به چنین افکت هایی توجه نکرده. شما نیز جایگزین های دیگر و استانداردی را برای جذاب نمودن سایت خود استفاده کنید،
پاینده باشید
 

جدیدترین ارسال ها

بالا