Ayuda con css porfa !

PuppeT · November 28, 2012

quizas es una duda super basica ...pero tontos son los que no preguntan ....

quiero hacer la parte azul solamente transparente de la imagen y nose como hacerlo ....

alguna ayuda o idea ...mi mente no da mas en estos momentos para pensar ....

<html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="Style.css"/>
   </head>
   <body>
   <form action="validar.jsp" method="post" name="form1" id="form0">
	    <center><code>
	    <h1>Control de Acceso</h1>
	    </code>
	    <p><code><label>Ingrese sus Datos</label><br><br>
	 <label>Usuario : </label>
	    <input type="text" id="usuario" name="usuario"> <img src="imagenes/login_usuario.gif"
	    width="34" height="32" alt="user">  
	    <label>Contraseña :</label>
	    <input type="password" id="contrasena" name="contrasena">
	    <img src="imagenes/candado.gif" width="36" height="33" alt="pass"><br><br>
	    <button type="submit" value="Entrar"><img src="imagenes/button-entrar.png" width="111"
	    height="41" alt="entrar"></button>
	    </code></p>
	    </center>
		    </form>	   

   </body>
</html>

espero ayuda ...se que lo sabran ! (=

AshWilliams · November 28, 2012

No entiendo man??....que quieres hacer transparente?? el botón que se ve descuadrado??....explícate mejor y te ayudamos ;)

Saludos :krider:

PuppeT · November 28, 2012

quiero hacer transparente la parte azul solamente ....cuando lo hago con un div me queda todo transparente

cañangasñangas · November 28, 2012

agrega este estilo al elemento que quieres transparentar:

background-color: transparent

PuppeT · November 28, 2012

claro ...si se que con eso lo hago tranparente .. me explique mal ...queri hacer asi onda medio transparente solo el color azul ... y cuando en el estilo ocupo opaity: .5 queda todo medio transparente ....y solo quiero que el color quede asi

poniendole transparente queda asi ...

HTML

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>

<div>
</div>
<form action="validar.jsp" method="post" name="form1" id="form0">
<div class="text">
	 <center><code>
	 <h1>Control de Acceso</h1>
	 </code>
	 <p><code><label>Ingrese sus Datos</label><br><br>
	 <label>Usuario : </label>
	 <input type="text" id="usuario" name="usuario"> <img src="imagenes/login_usuario.gif"
	 width="34" height="32" alt="user">  
	 <label>Contraseña :</label>
	 <input type="password" id="contrasena" name="contrasena">
	 <img src="imagenes/candado.gif" width="36" height="33" alt="pass"><br><br>
	 <input type="image" src="imagenes/button-entrar.png" width="80" height="30"/>
	 </code></p>
	 </center>
 </div>
		 </form>	

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body{background-image:url(imagenes/background-wallpaper-speaker-opera-images-497434-.-h-ibackgroundz.com.jpg); }
#form0{background-color:transparent; height:20%; width:60%; margin-bottom:10%; margin-left:20%; margin-right:20%; margin-top:10%;}
.trans{opacity:.5;}

aqui con el opacity ... pero no cacho como hacerlo ...o quizas lo estoy haciendo mal ...

HTML

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>

<div>
</div>
<form action="validar.jsp" method="post" name="form1" id="form0" class="trans">
<div class="text">
	 <center><code>
	 <h1>Control de Acceso</h1>
	 </code>
	 <p><code><label>Ingrese sus Datos</label><br><br>
	 <label>Usuario : </label>
	 <input type="text" id="usuario" name="usuario"> <img src="imagenes/login_usuario.gif"
	 width="34" height="32" alt="user">  
	 <label>Contraseña :</label>
	 <input type="password" id="contrasena" name="contrasena">
	 <img src="imagenes/candado.gif" width="36" height="33" alt="pass"><br><br>
	 <input type="image" src="imagenes/button-entrar.png" width="80" height="30"/>
	 </code></p>
	 </center>
 </div>
		 </form>	

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body{background-image:url(imagenes/background-wallpaper-speaker-opera-images-497434-.-h-ibackgroundz.com.jpg); }
#form0{background-color:#33F; height:20%; width:60%; margin-bottom:10%; margin-left:20%; margin-right:20%; margin-top:10%;}
.trans{opacity:.5;}

NO QUIERO QUE ME QUEDEN TRANSPARENTES LAS IMAGENES NI LAS CAJAS DE TEXTO ...MENOS LOS LABEL Y EL BOTON .... PROBE CON HACERLE EN EL CSS LOS LABEL CON OPACITY: 1 PAQUE NO SE VENA OPACOS ...PERO NADA !

JELPMY !

Edited November 28, 2012 by PuppeT

cañangasñangas · November 28, 2012

busque pero econtre puras cosas medias engorrosas asique te dejo algo que te va a salvar por ahora

<div style="background-image:url(bg.png);">formulario aca</div>

aca el fondo azul semi-transparente:

Edited November 28, 2012 by cañangasñangas

PuppeT · November 28, 2012

busque pero econtre puras cosas medias engorrosas asique te dejo algo que te va a salvar por ahora

<div style="background-image:url(bg.png);">formulario aca</div>

aca el fondo azul semi-transparente:

adhok ..... justo como queria ....parece que esa sera la unica solucion ...me puedes decir como los hiciste para que haga mas y un poco mas opacos ....photoshop ..algo asi o no ??

Edited November 28, 2012 by PuppeT

AshWilliams · November 28, 2012

div {
  background: rgba(200, 54, 54, 0.5);
}

Te dejo un link al articulo completo : http://css-tricks.com/rgba-browser-support/

Saludos :krider:

PuppeT · November 28, 2012

div {
background: rgba(200, 54, 54, 0.5);
}
Te dejo un link al articulo completo : http://css-tricks.co...rowser-support/

Saludos :krider:

esa es la cosaaa ....el medio post pa un codigo tan chico wn ....se las mandaron cabros ...si tengo mas dudas molesto con otro tema si no sale por aqui ....SALUDOS y GRACIAS ....

les debo las chelitas ! (; :laugh[1]:

Edited November 28, 2012 by PuppeT

cañangasñangas · November 29, 2012

div {
background: rgba(200, 54, 54, 0.5);
}
Te dejo un link al articulo completo : http://css-tricks.co...rowser-support/

Saludos :krider:
esa es la cosaaa ....el medio post pa un codigo tan chico wn ....se las mandaron cabros ...si tengo mas dudas molesto con otro tema si no sale por aqui ....SALUDOS y GRACIAS ....
les debo las chelitas ! (; :laugh[1]:

yo tb hiba a postear eso pero hay exploradores que no soportean rgba

Sign In

Ayuda con css porfa !

Recommended Posts

PuppeT

Link to comment

Share on other sites

AshWilliams

Link to comment

Share on other sites

PuppeT

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

PuppeT

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

PuppeT

Link to comment

Share on other sites

AshWilliams

Link to comment

Share on other sites

PuppeT

Link to comment

Share on other sites

cañangasñangas

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity