Puedo ver en las referencias de CSS cómo configurar la transparencia de la imagen y cómo configurar una imagen de fondo . Pero, ¿cómo puedo combinar estos dos para establecer una imagen de fondo transparente?
Tengo una imagen que me gustaría usar como fondo, pero es demasiado brillante, me gustaría reducir la opacidad a aproximadamente 0.2. ¿Cómo puedo hacer esto?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
opacity: ...en todos los navegadores, ¡es mucho mejor!fuente
:beforelugar de:aftery luego no tengo que manipular elz-indexporque:beforetermina automáticamente debajo del contenido principal. (Actualmente probado en Chrome y FF.)background-repeat: no-repeat; background-attachment: fixed; background-position: center;dentro de #main: después de {...} .Solución con 1 div y SIN imagen transparente:
Puede usar la función CSS3 multibackground y poner dos fondos: uno con la imagen, otro con un panel transparente sobre él (porque creo que no hay forma de establecer directamente la opacidad de la imagen de fondo):
No puede usarlo
rgba(255,255,255,0.5)porque solo solo se acepta en la parte posterior, por lo que he usado gradientes generados para cada navegador para este ejemplo (es por eso que es tan largo). Pero el concepto es el siguiente:http://jsfiddle.net/pBVsD/1/
fuente
Solución simple
si necesita establecer el gradiente solo en la imagen de fondo :
fuente
Vi esto y en CSS3 ahora puede colocar el código de esta manera. Digamos que quiero que cubra todo el fondo, haría algo como esto. Luego, con
hsla(0,0%,100%,0.70)o rgba, usa un fondo blanco con cualquier porcentaje de saturación u opacidad para obtener el aspecto que desea.fuente
Puede usar CSS psuedo selector :: after para lograr esto. Aquí hay una demostración en funcionamiento.
fuente
Tuve un problema similar Tenía una imagen y quería reducir la transparencia y tener un fondo negro detrás de la imagen. En lugar de reducir la opacidad o crear un fondo negro o cualquier div secundario, configuro un degradado lineal para la imagen, todo en una línea:
fuente
He usado la respuesta de @Dan Eastwell y funciona muy bien. El código es similar a su código pero con algunas adiciones.
fuente
Una excelente manera de hacerlo para una imagen simple es hacerlo usando solo CSS para establecer el fondo del elemento HTML de esta manera.
Si quieres ponerte elegante y configurar su opacidad, entonces, en IE9 + *, puedes configurar un color de fondo transparente del cuerpo. Esto funciona superponiendo el blanco semitransparente para que la imagen sea más blanca y parezca más brillante. Por ejemplo, el blanco con 75% de opacidad (
rgba(255,255,255,.75)) produciría el siguiente efecto.position: relative, mientras que el cuerpo esposition: absolute. Esto es para evitar que el color de fondo del cuerpo se comporte más como un resaltador del texto en el cuerpo.Esto incluso podría expandirse a algo comparable, pero aún muy distinto de los filtros CSS al cambiar el fondo de color RGBA del cuerpo. Por ejemplo,
rgba(0,255,0,.75)crearía un tinte muy verde como puede ver en el fragmento de código.rgba(0,255,0,.75)como algo ejemplificado por{red:0, green:255, blue:0, alpha:'75%'}.* Se puede encontrar una tabla de compatibilidad completa en Can I Use. Sin embargo, tenga en cuenta también que debe hacer clic en "Mostrar todo" para ver que IE9 lo admite.
Apéndice
Como ya he respondido a la pregunta pero tengo más que quiero agregar, estoy titulando este apéndice de la sección y haciendo que agregue información potencialmente útil. Por lo tanto, para extrapolar aún más el contenido anterior, puede usar un SVG como imagen de fondo para hacer cosas increíbles. Por ejemplo, podría crear un fondo de pantalla de carga con un icono de sitio web genial como puede ver en el ejemplo de un SVG codificado en base64 a continuación.
background-size: coverCSS hace que el logotipo de SVG en el fondo cambie de tamaño al tamaño del elemento HTML.fuente
En su CSS agregue ...
En JavaScript usa ...
NB: agregue prefijos de proveedor según sea necesario, pero Chromium debería estar bien sin él.
fuente
Bueno, la única forma CSS de hacer solo la transparencia de fondo es a través de,
RGBapero dado que desea usar una imagen, sugeriría usar Photoshop o Gimp para hacer que la imagen sea transparente y luego usarla como fondo.fuente
opactiy: 1;no solo RGBa.background-imageestilo en un contenedor y luego establecer unopacityestilo en el mismo elemento. Eso también haría que el texto y otros contenidos de ese elemento sean transparentes. Pruebe esto si no me cree: w3schools.com/Css/tryit.asp?filename=trycss_transparencyAcabo de agregar position = absolute, top = 0, width = 100% en #main y configuré el valor de opacidad en #background
Apliqué el fondo a un div antes del principal.
fuente
Me encontré con esta publicación porque tenía el mismo problema y luego pensé ¿por qué meterse con CSS, ajustar los valores y presionar Actualizar cuando puede ajustar fácilmente la opacidad en Photoshop? Copie la imagen, péguela como una nueva capa y luego mueva el control deslizante de opacidad.
fuente
Tuve un problema similar y simplemente tomé la imagen de fondo con Photoshop y creé un nuevo .png con la opacidad que necesitaba. Problema resuelto sin preocuparme si mi CSS funcionaba en todos los dispositivos y navegadores
fuente