Искам да поставя картинка в/у полупрозрачен слой

grizli · 5 Юни 2011

Код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=windows-1251" />
<title>Сайт за лично творчество</title>
<meta name="description" content="Сайт за лично творчество" />
<meta name="keywords" content="Разкази, стихове, романи, новели, снимки, картинки, images, Photoshop, фотоапарат" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="CSS/aaa.css" />
<script type="text/javascript" src="JS/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>

<body>
	<div id="kazan">
		<div id="gore">
			<div id="flash">
				<div>	
			<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="576" height="116">
				<param name="movie" value="cat_and_mouse.swf" />
        		
				<object type="application/x-shockwave-flash" data="swf/cat_and_mouse.swf" width="576" height="116">
				
				<div>
					<h1>Alternative content</h1>

					<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
				</div>
				
				</object>
				
			</object>
				</div>
			

			<div id= "gorelinks"></div>
					
					<div id="menu">
					 <ul>
                        	 <li class="za_men"><a href="#">За мен</a>
                             <li class="lit"><a href="#" >Литература</a></li>
                             <li class="images"><a href="#" >Изображения</a></li>
                             <li class="photos"><a href="#" >Снимки</a></li>
                             <li class="music"><a href="#" >Музика</a></li>
                        </ul>
					</div>
					
						<div id="gray"></div>
							
							
								<div id="box1">
								<div id="box1up"></div>
								<div id="box1content"></div>
								<div id="box1down"></div>
								</div>
							
							
								<div id="box2">
									
										<div id="box2up"></div>
										
											<div id="box2content"></div>
												
												<div id="box2down"></div>
													<div id="moliv"></div>		
								</div>					
									
								
							
									
									<div id="box3">
									<div id="box3up"></div>
									<div id="box3content"></div>
									<div id="box3down"></div>
									</div>
								
							
			</div>
		</div>
	</div>
</body>
</html>

CSS:

Код:

html, body {height: 100%; background: #ccc; color: #000; font: 18px georgia; margin: 0px; padding: 0px;}
#kazan {width: 862px; height: auto; margin: 0 auto; padding:0;}
#gore {background: url(../images/leftUP.png); height: 116px; width: 140px; margin: 0;padding:0;}
#flash {margin: 0px 0 0 140px; width: 576px; height: 116px;}
#gorelinks {background: url(../images/rightUP.png); height: 116px; width: 145px; margin: -120px 0 0 576px;}
#gray {background: url(../images/gray.png) no-repeat; margin: 35px 0px 0px -140px; height: 515px; width: 861px;}





#menu{
position:absolute;
left:204px;
width:920px;
top:98px;
margin: 0px 0px 0px 0px;
}

#menu ul{
list-style:none;
}

#menu ul li{
float:left;
}

.za_men a{
background:url(../images/but1.png) no-repeat;
margin:0 15px 0 0;
text-decoration: none; text-align: center; color: #FFF; font-family: Georgia, Times New Roman, serif; font-size: 18px; font-weight: bold;
display:block;
height:59px;
width:160px;
padding-top:10px;
}

.lit a{
background:url(../images/but2.png) no-repeat;
margin:0 16px 0 0;
text-decoration: none; text-align: center; color: #FFF; font-family: Georgia, Times New Roman, serif; font-size: 18px; font-weight: bold;
display:block;
height:59px;
width:160px;
padding-top:10px;
}

.images a{
background:url(../images/but3.png) no-repeat;
margin:0 15px 0 0;
text-decoration: none; text-align: center; color: #FFF; font-family: Georgia, Times New Roman, serif; font-size: 18px; font-weight: bold;
display:block;
height:59px;
width:160px;
padding-top:10px;
}

.photos a{
background:url(../images/but4.png) no-repeat;
margin:0 15px 0 0;
text-decoration: none; text-align: center; color: #FFF; font-family: Georgia, Times New Roman, serif; font-size: 18px; font-weight: bold;
display:block;
height:59px;
width:160px;
padding-top:10px;
}

.music a{
background:url(../images/but5.png) no-repeat;
margin:0 15px 0 0;
text-decoration: none; text-align: center; color: #FFF; font-family: Georgia, Times New Roman, serif; font-size: 18px; font-weight: bold;
display:block;
height:59px;
width:160px;
padding-top:10px;
}

#box1 {width: 201px; height: 254px; margin: -464px 0px 0 -131px;}
#box1up {width: 201px; height: 19px; background: url(../images/kapak_01.png) no-repeat;  margin: 0px 0 0 0px; -webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
#box1content {width: 201px; height: 216px; background-color: #cbafaf; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
filter:alpha(opacity=65);
opacity: 0.65;
-moz-opacity:0.65;
}
#box1down {width: 201px; height: 19px; background: url(../images/kapak_01.png) no-repeat; margin: 0 0 0 0; -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;}

#box2 {width: 401px; height: 254px; margin: -254px 0px 0 92px;}
#box2up {width: 401px; height: 19px; background: url(../images/kapak_02.png) no-repeat; margin: 0px 0 0 0px; -webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
#box2content {width: 401px; height: 216px; background-color: #cbafaf;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
filter:alpha(opacity=65); 
opacity: 0.65;
-moz-opacity:0.65;}

#moliv {background: url(../images/moliv.png) no-repeat; display: block; width: 273px; height: 215px; 
margin: -235px 0 0 92px;}

#box2down {width: 401px; height: 19px; background: url(../images/kapak_02.png) no-repeat; margin: 0 0 0 0; -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;}


#box3 {width: 201px; height: 254px; margin: -254px 0px 0 512px;}
#box3up {width: 201px; height: 19px; background: url(../images/kapak_03.png) no-repeat;  margin: 0px 0 0 0px; -webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
#box3content {width: 201px; height: 216px; background-color: #cbafaf; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
filter:alpha(opacity=65);
opacity: 0.65;
-moz-opacity:0.65;
}
#box3down {width: 201px; height: 19px; background: url(../images/kapak_03.png) no-repeat; margin: 0 0 0 0; -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;}

Но картинката с молива попада и тя под полупрозрания фон! Къде ли не местих слоя с нея. Слоят се казва moliv. Може ли някой да помогне?

shterev · 5 Юни 2011

ако дадеш линк към сайта , ще погледна, а иначе да чета всичкия код нямам време

grizli · 5 Юни 2011

shterev каза:
ако дадеш линк към сайта , ще погледна, а иначе да чета всичкия код нямам време

Ми сайтът се прави още. Съответно няма как да е качен.

IzKuFeLiQqQqQ · 5 Юни 2011

ползвай http://www.zenelements.com/blog/css3-rgb-rgba-color-opacity/ аз така успях да го направя това...

http://css3generator.com/ -> RGBA

grizli · 6 Юни 2011

IzKuFeLiQqQqQ каза:
ползвай http://www.zenelements.com/blog/css3-rgb-rgba-color-opacity/ аз така успях да го направя това...

http://css3generator.com/ -> RGBA

Хм - не става ясно какво си успял да направиш. Това на мен не видях да ми помага. Има много неща там, но аз имам конкретен въпрос, чието решение го няма.

proba · 6 Юни 2011

Просто задай на div-a да е opacity.

.div
{
background: url('myimage.png');
opacity: 0.4;
filter: alpha(opacity=40);
}

Филтътра се изполва за IE.
Като 40 отговаря на 0.4
Само си променяш желаната стойност на прозрачноста.

grizli · 6 Юни 2011

proba каза:
Просто задай на div-a да е opacity.

.div
{
background: url('myimage.png');
opacity: 0.4;
filter: alpha(opacity=40);
}

Увеличете...

Филтътра се изполва за IE.
Като 40 отговаря на 0.4
Само си променяш желаната стойност на прозрачноста.

Оф. Не е толкова просто. Това съм го направил. Но имам картинката с молива върху слоя и под тази картинка не искам да е прозрачно. Само около нея трябва да е прозрачен слоят.

grizli · 6 Юни 2011

Докато обяснявах, изведнъж ми просветна. Направих 3 слоя - 2 полупрозрачни в краищата и средния с картинката.

Искам да поставя картинка в/у полупрозрачен слой

grizli

Registered

shterev

Registered

grizli

Registered

IzKuFeLiQqQqQ

Registered

grizli

Registered

proba

Registered

grizli

Registered

grizli

Registered