sfondo box trasparente

feelthemusic · 23 Gen 2013

Salve sto cercando di rendere trasparente lo sfondo di un box, ho provato con la funzione opacity, ma vorrei che solo lo sfondo del box sia trasparente e non il suo contenuto,
ecco il codice

Codice:

<html lang="it">
<head>
<meta http-equiv="content-style-type" content="text/css" />
<meta charset="utf-8" />
<link href="layout.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
            function cambiaIFrameSRC( url ){
                document.getElementById('mioFrame').src = url;
            }
        </script>
</head>
<body>

 <div id="telaio">
 <div id="container">
	<div id="header">
         <img src="logo.gif" class="imgp1">
	</div>
	<div id="navigation">
		<ul>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('home.html')"><i>Home</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('dovesiamo.html')"><i>Dove siamo</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('menu.html')"><i>Menu</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('contatti.html')"><i>Contatti</i></a></li>
		</ul>
             <img src="wifi.gif" width=60 height=25 class="imgp3">
             <img src="fb.png" width=30 class="imgp2"> 
             
                  
	</div>
	<div id="content-container">
		<div id="content"> 
		 <iframe id="mioFrame" src="home.html" name="mioFrame" scrolling=no frameborder="0" framespaging="0" width="900" height="466"></iframe>	
                  
		</div>
        
		
		<div id="footer">
                
     
		</div>
	</div>
 </div> 

</div>
</body>
</html>

Il box in cui vorrei rendere lo sfondo trasparente è "content" ma vorrei che l' iframe al suo interno sia visualizzato normalmente. Sapete aiutarmi?

grazie mille in anticipo

Nefyt · 23 Gen 2013

Mettilo solo per il posizionamento con opacity e crea un altro div per il contenuto, oppure togli il background e setta trasparente quello sotto

feelthemusic · 24 Gen 2013

Ho provato cosi ma lo sfondo non diventa opaco

HTML

Codice:

<html lang="it">
<head>
<meta http-equiv="content-style-type" content="text/css" />
<meta charset="utf-8" />
<link href="layout.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
            function cambiaIFrameSRC( url ){
                document.getElementById('mioFrame').src = url;
            }
        </script>

</head>
<body>

 <div id="telaio">
 <div id="container">
	<div id="header">
         <img src="logo.gif" class="imgp1">
	</div>
	<div id="navigation">
		<ul>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('home.html')"><i>Home</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('dovesiamo.html')"><i>Dove siamo</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('menu.html')"><i>Menu</i></a></li>
			<li><a style=" text-decoration: none;" href="javascript:void(0)" onclick="cambiaIFrameSRC('contatti.html')"><i>Contatti</i></a></li>
		</ul>
             <img src="wifi.gif" width=60 height=25 class="imgp3">
             <img src="fb.png" width=30 class="imgp2"> 
             
                  
	</div>
	<div id="content-container">
		<div id="content"> 
		 
                  
		</div>
        <div id="contentin">
		<iframe id="mioFrame" src="home.html" name="mioFrame" scrolling=no frameborder="0" framespaging="0" width="900" height="466"></iframe>	
        </div>
		<div id="footer">
	     -P.IVA
		</div>
	</div>
 </div> 

</div>
</body>
</html>

CSS

Codice:

body {background-image: url('firenze.jpg');}

* {margin: 0;padding: 0;}

#telaio {text-align: center;}


           
#container
{
	margin: 0 auto;
	width: 900px;
        height: 600px;
        text-align: left;
         text-shadow: 0 1px 1px rgba(0,0,0,.3); 
          -moz-box-shadow : 0 0 10px #666;
         -webkit-box-shadow : 0 0 10px #666;
         box-shadow: 0 0 10px #666;
}

#header
{       
	background: #ffffb3;
	padding: 20px;
}



#navigation
{
	float: left;
	width: 900px;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }


#content-container
{       
	float: left;
	width: 900px;
        color:#fff;
 

}



#content
{      
        
	clear: left;
	float: left;
	width: 560px;
	margin: auto;
        display:inline;
	opacity: 0.3;
        
         
}

#contentin { 
	clear: left;
	float: left;
	width: 560px;
	margin: auto;
        display:inline;
	}

 
#footer
{
	clear: both;
	background: #333;
	text-align: right;
        color: white;
       
	padding: 5px;
	height: 3%;
}



.imgp1 {position: relative;
        right:20px;}

.imgp2 {position: relative;
        top: 0px;
        
        float: right;}

.imgp3 {position: relative;
        top: 3px;
        
        float:right;}

.active {background:yellow;}

Jonn · 24 Gen 2013

Scusami eh, non voglio sembrare ignorante, ma se invece di tanti problemi così complessi ti facessi l'immagine di sfondo usando la gomma per sfondo di Photoshop con:

Tolleranza: 255
Opacità: 50%

Risolvi senza tanto codice inutile che poi ti appesantisce anche la pagina.
Magari se fai in questo modo ricorda di salvarla in png visto che solo questo formato supporta le semitrasparenze, mentre il gif solo la trasparenza 100%.

Altrimenti non so proprio come aiutarti ^^

WpStyle · 24 Gen 2013

Crea un'immagine da 1px del colore che vuoi con opacità 50% (poi vedi tu se può bastare) poi la richiami nel background del box interessato.

feelthemusic · 24 Gen 2013

Scusate l'ignoranza ma non sono il massimo con photoshop. Una volta che creo un immagine e gli do un colore qualè è il procedimento da seguire per fare in modo che il colore diventi semi trasparente?

Jonn · 24 Gen 2013

Quello che ti ho scritto io:

Apri l'immagine:
la fai di 1px x 1px, la colori con riempimento colore

Tasto destro su Gomma:
Gomma
Gomma Magica
Gomma Per Sfondo<----

Opacità: 50%
Tolleranza: 255
(Le altre impostazioni lasciale così come sono)

Cancelli e salvi in formato PNG

feelthemusic · 24 Gen 2013

Sto usando photoshop cs6, hoo provato come mi hai detto, ma nella barra in alto relativa alla gomma per sfondo mi chiede solo la tolleranza espressa in percentuale, e l'opacità non me la fa regolare. ??

Jonn · 25 Gen 2013

ciao,
Scusami ho sbagliato, è che sono abituato ad usare quella:
devi usare la:
- Gomma Magica

La gomma magica in poche parole ti cancella solo i pixel di ugual colore, ed in base alla tolleranza anche quelli con colore più simili a quelli che selezioni da cancellare.

Il fatto è che se imposti la tolleranza a 255 (cioè il massimo valore) è come se gli dicessi, cancella tutti i colori dell'immagine (cioè tutta)
mentre l'opacità come dice la parola stessa imposta la percentuale di trasparenza di quello che vuoi cancellare.

Con 255 e 50% gli dici praticamente che la gomma magica deve cancellare tutta l'immagine con semi(50%)-trasparenza.

Scusami l'errore (l'abitudine ad usare la gomma per sfondo XD)
Prova con Gomma Magica e fammi risapere.

WpStyle · 25 Gen 2013

Se usi Adobe Firework crea un quadrato da 1x1 px dagli un colore di sfondo e dalle proprietà imposta l'opacità.

Cerca

Cerca

sfondo box trasparente

feelthemusic

Nuovo Utente

Nefyt

Utente Attivo

feelthemusic

Nuovo Utente

Jonn

Utente Attivo

WpStyle

Utente Attivo

feelthemusic

Nuovo Utente

Jonn

Utente Attivo

feelthemusic

Nuovo Utente

Jonn

Utente Attivo

WpStyle

Utente Attivo

Discussioni simili