html - transparentes - menu transparente css
¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS? (27)
Puedes hacerlo con el
rgba color codeusando css como este ejemplo que se muestra a continuación.
.imgbox img{
height:100px;
width:200px;
position:relative;
}
.overlay{
background:rgba(74, 19, 61, 0.4);
color:#fff;
text-shadow:0px 2px 5px #000079;
height:100px;
width:300px;
position:absolute;
top:10%;
left:25%;
padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<div class="overlay">
<p>This is Simple Text.</p>
</div>
</div>
¿Es posible, usando solo CSS, hacer que el background de un elemento sea semitransparente pero tenga el contenido (texto e imágenes) del elemento opaco?
Me gustaría lograr esto sin tener el texto y el fondo como dos elementos separados.
Al intentar
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
Parece que los elementos hijos están sujetos a la opacidad de sus padres, por lo que la opacity:1 es relativa a la opacity:0.6 de los padres.
Aquí hay un complemento de jQuery que manejará todo por ti, Transify ( Transify - un complemento de jQuery para aplicar fácilmente la transparencia / opacidad al fondo de un elemento ).
Me encontraba con este problema de vez en cuando, así que decidí escribir algo que haría la vida mucho más fácil. El script tiene menos de 2 KB y solo requiere 1 línea de código para que funcione, y también manejará la animación de la opacidad del fondo, si lo desea.
Así es como hago esto (puede que no sea óptimo, pero funciona):
Crea el div que quieras que sea semitransparente. Dale una clase / ID. Déjelo VACÍO, y ciérrelo. Déle una altura y anchura determinadas (por ejemplo, 300 píxeles por 300 píxeles). Dale una opacidad de 0.5 o lo que quieras, y un color de fondo.
Luego, DIRECTAMENTE DEBAJO de ese div, crea otro div con una clase / id diferente. Crea un párrafo dentro de él, donde colocarás tu texto. Indique la posición div : relativo y superior: -295px (eso es NEGATIVO 295 píxeles). Dale un índice z de 2 para una buena medida, y asegúrate de que su opacidad sea 1. Da estilo a tu párrafo como quieras, pero asegúrate de que las dimensiones sean menores que las del primer div para que no se desborde.
Eso es. Aquí está el código:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}
<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>
Esto funciona en Safari 2.x, no sé acerca de Internet Explorer.
CSS3 tiene una solución fácil de su problema. Utilizar:
background-color:rgba(0,255,0,0.5);
Aquí, rgba significa rojo, verde, azul y alfa. El valor verde se obtiene debido a 255 y la media transparencia se obtiene mediante un valor alfa de 0.5.
Casi todas estas respuestas asumen que el diseñador desea un fondo de color sólido. Si el diseñador realmente quiere una foto como fondo, la única solución real en este momento es JavaScript como el plugin jQuery Transify mencionado en otra parte .
Lo que debemos hacer es unirnos a la discusión del grupo de trabajo de CSS y hacer que nos den un atributo de opacidad de fondo. Debería funcionar de la mano con la función de fondos múltiples.
El método más sencillo sería utilizar una imagen PNG de fondo semitransparente.
Puede usar JavaScript para que funcione en Internet Explorer 6 si lo necesita.
Utilizo el método descrito en los PNG transparentes en Internet Explorer 6 .
Aparte de eso,
¿Podría fingir utilizando two side-by-side sibling elements : haga uno semitransparente y luego absolutely position the other over the top ?
El problema es que el texto TIENE realmente una opacidad total en su ejemplo. Tiene una opacidad total dentro de la etiqueta p , pero la etiqueta p es solo semitransparente.
Puede agregar una imagen de fondo PNG semitransparente en lugar de realizarla en CSS, o separar el texto y la división en 2 elementos y mover el texto sobre el cuadro (por ejemplo, margen negativo).
De lo contrario no será posible.
EDITAR:
Al igual que Chris mencionó: si usa un archivo PNG con transparencia, tiene que usar una solución alternativa de JavaScript para que funcione en el molesto Internet Explorer ...
En Firefox 3 y Safari 3, puedes usar RGBA como mencionó Georg Schölly .
Un truco poco conocido es que puede usarlo en Internet Explorer y usar el filtro de degradado.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=''#7F00FF00'', EndColorStr=''#7F00FF00'');
El primer número hexadecimal define el valor alfa del color.
Solución completa todos los navegadores:
.alpha60 {
/* Fallback for web browsers that doesn''t support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Esto es de la transparencia de fondo de CSS sin afectar los elementos secundarios, a través de RGBa y filtros .
Capturas de pantalla prueba de resultados:
Esto es cuando se usa el siguiente código:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn''t support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
Esta es la mejor solución que pude encontrar, NO usar CSS 3. Y funciona muy bien en Firefox, Chrome e Internet Explorer por lo que puedo ver.
Coloque un DIV contenedor y dos DIV secundarios en el mismo nivel, uno para el contenido y otro para el fondo. Y utilizando CSS, ajuste automáticamente el tamaño del fondo para que se ajuste al contenido y ponga el fondo en realidad en la parte posterior utilizando el índice z.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
<div class="container">
<div class="content">
Here is the content.
<br />Background should grow to fit.
</div>
<div class="background"></div>
</div>
Este método le permite tener una imagen en el fondo y no solo un color sólido, y se puede usar para tener transparencia en otros atributos como los bordes. No se requieren imágenes PNG transparentes.
Use :before (o :after ) en CSS y dele el valor de opacidad para dejar el elemento en su opacidad original. Por lo tanto, puede usar: antes para crear un elemento falso y darle el fondo transparente (o bordes) que desee y moverlo detrás del contenido que desea mantener opaco con z-index .
Un ejemplo ( fiddle ) (tenga en cuenta que el DIV con clase dad es solo para proporcionar algo de contexto y contraste con los colores, este elemento adicional en realidad no es necesario, y el rectángulo rojo se mueve un poco hacia abajo y hacia la derecha para dejar visible el fondo detrás del elemento fancyBg ):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
con este CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:''-''; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
En este caso .fancyBg:before tiene las propiedades CSS que desea tener con transparencia (fondo rojo en este ejemplo, pero puede ser una imagen o bordes). Está posicionado como absoluto para moverlo detrás de .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).
Hace un tiempo, escribí sobre esto en Transparencia de fondo de navegador cruzado con CSS .
Extrañamente, Internet Explorer 6 le permitirá hacer el fondo transparente y mantener el texto en la parte superior totalmente opaco. Para los otros navegadores, sugiero usar un archivo PNG transparente.
Hay un truco para minimizar el marcado: use un pseudo elemento como fondo y puede establecer la opacidad sin afectar el elemento principal y sus elementos secundarios:
Salida:
Código relevante:
p {
position: relative;
}
p:after {
content: '''';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url(''http://i.imgur.com/k8BtMvj.jpg'') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
El soporte del navegador es Internet Explorer 8 y Internet Explorer 8 posteriores.
Hay una solución más fácil para colocar una superposición sobre una imagen en la misma división. No es el uso correcto de esta herramienta. Pero funciona como un encanto para hacer esa superposición utilizando CSS.
Utilice una sombra de inserción como esta:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Eso es todo :)
Normalmente uso esta clase para mi trabajo. Es bastante bueno.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Para que el fondo de un elemento sea semitransparente pero tenga el contenido (texto e imágenes) del elemento opaco. Necesita escribir código css para esa imagen y debe agregar un atributo llamado opacidad con un valor mínimo. p.ej
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// menor el valor más será la transparencia, o el valor menor será la transparencia.
Para un color de fondo semitransparente simple, las soluciones anteriores (CSS3 o bg images) son las mejores opciones. Sin embargo, si desea hacer algo más sofisticado (por ejemplo, animación, múltiples fondos, etc.), o si no quiere confiar en CSS3, puede probar la "técnica de panel":
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
La técnica funciona mediante el uso de dos "capas" dentro del elemento del panel externo:
- uno (el "reverso") que se ajusta al tamaño del elemento del panel sin afectar el flujo de contenido,
- y uno (el "cont") que contiene el contenido y ayuda a determinar el tamaño del panel.
La position: relative en el panel es importante; le dice a la capa posterior que se ajuste al tamaño del panel. (Si necesita que la etiqueta <p> sea absoluta, cambie el panel de <p> a <span> y envuelva todo eso en una etiqueta de posición absoluta <p> ).
La principal ventaja que tiene esta técnica sobre las similares enumeradas anteriormente es que el panel no tiene que tener un tamaño específico; como se codificó anteriormente, se ajustará a todo el ancho (diseño normal de elementos de bloque) y solo tan alto como el contenido. El elemento del panel exterior se puede dimensionar de la forma que desee, siempre que sea rectangular (es decir, el bloque en línea funcionará; la línea en línea simple no lo hará).
Además, te da mucha libertad para el fondo; tiene la libertad de poner realmente cualquier cosa en el elemento posterior y no afectará el flujo de contenido (si desea varias subcapas de tamaño completo, asegúrese de que también tengan la posición: absoluta, ancho / alto: 100%, y arriba / abajo / izquierda / derecha: auto).
Una variación para permitir el ajuste de inserción de fondo (a través de la parte superior / inferior / izquierda / derecha) y / o la fijación de fondo (mediante la eliminación de uno de los pares izquierdo / derecho o superior / inferior) es utilizar el siguiente CSS en su lugar:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Tal como está escrito, esto funciona en Firefox, Safari, Chrome, IE8 + y Opera, aunque IE7 e IE6 requieren CSS y expresiones adicionales, IIRC, y la última vez que lo verifiqué, la segunda variación de CSS no funciona en Opera.
Cosas a tener en cuenta:
- Los elementos flotantes dentro de la capa de cont. No serán contenidos. Deberá asegurarse de que estén limpios o contenidos, o se deslizarán fuera de la parte inferior.
- Los márgenes van en el elemento del panel y el relleno va en el elemento cont. No use el opuesto (márgenes en el cont o el relleno en el panel) o descubrirá rarezas como que la página siempre sea un poco más ancha que la ventana del navegador.
- Como se mencionó, todo tiene que ser un bloque o un bloque en línea. Siéntase libre de usar
<div>s en lugar de<span>s para simplificar su CSS.
Una demostración más completa, que muestra la flexibilidad de esta técnica usándola en conjunto con la display: inline-block , y con width auto / width s / min-height específico y auto :
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
Y aquí hay una demostración en vivo de la técnica que se utiliza ampliamente:
Puede resolver esto para Internet Explorer 8 mediante (ab) usando la sintaxis de degradado. El formato de color es ARGB. Si está utilizando el preprocesador Sass , puede convertir colores utilizando la función incorporada "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=''#80000000'', endColorstr=''#80000000'')";
Puede usar CSS 3 puro: rgba(red, green, blue, alpha) , donde alpha es el nivel de transparencia que desea. No hay necesidad de JavaScript o jQuery.
Aquí hay un ejemplo:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Puede utilizar el color RGB con opacidad como este código de color en RGB (63,245,0) y agregar opacidad como (63,245,0,0.5) y también agregar RGBA reemplazar RGB. Un uso para la opacidad.
div{
background:rgba(63,245,0,0.5);
}
Puedes usar RGBA (red, green, blue, alpha) en el CSS , algo como esto:
Así que simplemente haz algo como esto que va a funcionar en tu caso:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Si eres un chico de Photoshop , también puedes usar:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
O:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Si usas Less , puedes usar fade(color, 30%) .
Utilice una imagen PNG semitransparente o use CSS3:
background-color:rgba(255,0,0,0.5);
Aquí hay un artículo de css3.info, Opacity , RGBA and compromise (2007-06-03).
Opacidad de fondo, pero no el texto tiene algunas ideas. Utilice una imagen semitransparente o superponga un elemento adicional.
Es mejor usar un .png semitransparente .
Simplemente abra Photoshop , cree una imagen de 2x2 píxeles (¡ elegir 1x1 puede causar un error en Internet Explorer! ), Llénelo con un color verde y configure la opacidad en la "pestaña Capas" al 60%. Luego guárdalo y hazlo una imagen de fondo:
<p style="background: url(green.png);">any text</p>
Funciona bien, por supuesto, excepto en el encantador Internet Explorer 6 . Hay mejores soluciones disponibles, pero aquí hay un truco rápido:
p {
_filter: expression((runtimeStyle.backgroundImage != ''none'') ? runtimeStyle.filter = ''progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''+currentStyle.backgroundImage.split(''/"'')[1]+'', sizingMethod=scale)'' : runtimeStyle.filter,runtimeStyle.backgroundImage = ''none'');
}
color de fondo: rgba (255,0,0,0.5); como se mencionó anteriormente es la mejor respuesta, simplemente poner. Decir que usar CSS3, incluso en 2013, no es simple porque el nivel de soporte de varios navegadores cambia con cada iteración.
Si bien background-color es compatible con todos los navegadores principales (no es nuevo en CSS3) [1], la transparencia alfa puede ser complicada, especialmente con Internet Explorer antes de la versión 9 y con el color del borde en Safari antes de la versión 5.1. [2]
El uso de algo como Compass o SASS puede ayudar realmente a la producción y la compatibilidad entre plataformas.
[1] W3Schools: CSS background-color Property
[2] Blog de Norman: Lista de verificación de soporte del navegador CSS3 (octubre de 2012)
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>