sfondo box trasparente

F

feelthemusic

Nuovo Utente
29 Nov 2012
14
0
0
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?:confused: grazie mille in anticipo
 
N

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Mettilo solo per il posizionamento con opacity e crea un altro div per il contenuto, oppure togli il background e setta trasparente quello sotto
 
F

feelthemusic

Nuovo Utente
29 Nov 2012
14
0
0
Ho provato cosi ma lo sfondo non diventa opaco :p:confused:

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;}
 
Ultima modifica:
Jonn

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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 ^^
 
F

feelthemusic

Nuovo Utente
29 Nov 2012
14
0
0
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

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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
 
F

feelthemusic

Nuovo Utente
29 Nov 2012
14
0
0
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

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
S Filtro alpha per lo sfondo di un box HTML e CSS 3
M Sfocare sfondo Photoshop CS6 Photoshop 2
K Sfondo nuovo file Photoshop 0
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
A Immagine decentrata con sfondo trasparente Photoshop 0
Y cambiare sfondo di una pagina Javascript 1
L Non riesco a riprodurre uno sfondo Photoshop 0
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
Cosina Cambio colore sfondo al click Javascript 2
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
G Fare uno sfondo con il prato e degli alberi Photoshop 0
J Info per copia sfondo Photoshop 2
S Scontorno, cambio sfondo, alone Photoshop 1
N sfondo trasparente photoshop 2019 Photoshop 2
Y Colore sfondo testo Javascript 0
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
R [HTML] sfondo header HTML e CSS 0
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
asevenx [HTML]Problemi float e adattamento sfondo HTML e CSS 2
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
O Allo scroll cambiare colore di sfondo jQuery 0
V javascript - cambiare immagine di sfondo di un div Javascript 3
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
dany81 [Photoshop] Eliminare più sfondo possibile... Photoshop 3
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
R Sfondo animato per sito con Adobe Muse Windows e Software 3
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
utente testo scorrevole con sfondo colorato con css esterno HTML e CSS 6
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
S Immagini multiple come sfondo HTML e CSS 3
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Q Pubblicità al posto dello sfondo vbulletin 4 HTML e CSS 0
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
B cambiare sfondo alle celle della tabella Javascript 1
S Se voglio far scorrere le immagini dello sfondo di una pagina (oviamente html) come faccio? HTML e CSS 1
S Come faccio a far scorrere delle immagini come sfondo di una pagina? Discussioni Varie 1
asevenx trasparenza da non applicare allo sfondo HTML e CSS 3
C Div con bordi come sfondo HTML e CSS 6

Discussioni simili

Alto Basso