¿Se puede poner un fondo en parte transparente y ver color de fondo al mismo tiempo?

walvaRo · #1 (**permalink**) 12/03/2013, 18:32

Hola amigos, buenas noches, tengo una duda:
¿Se puede poner una imagen de fondo, (png), que en parte es transparente en un div, y ver al mismo tiempo el color de fondo especificado para dicha div?

¿Es posible el siguiente código, o está mal?

Código:

	#wrapperlittle {
	width:1150px;
	height:auto;
	margin:0px auto 21px auto;
	padding-left:50px;
	padding-top:21px;
	overflow:hidden;
	clear:both;
	background-color:#e4413e;
	background:
		url(images/wrapperlittle_bg_top_red.png) top no-repeat,
		url(images/wrapperlittle_bg_right_red.png) right repeat-y,
		url(images/wrapperlittle_bg_bottom_red.png) bottom no-repeat,
		url(images/wrapperlittle_bg_left_red.png) left repeat-y;
	}

pzin · #2 (**permalink**) 13/03/2013, 01:40

¿Probaste a hacerlo? Sí se puede. Incluso hay una técnica para usar fondo reusables. Hay aquí algunos ejemplos de esta técnica.

walvaRo · #3 (**permalink**) 13/03/2013, 07:51

He probado y no se ve el fondo de color del div, ni se ve la imagen que va a la izquierda. ¿Está mal escrito el CSS?

pzin · #4 (**permalink**) 13/03/2013, 08:14

Como estás usando el shorthand background, especifica backgound-color después, no antes.

walvaRo · #5 (**permalink**) 13/03/2013, 08:38

He probado el color background después, pero ocurre lo mismo, no se ve el color de fondo y además, una de las imágenes de fondo del div no se ve, en concreto la que alineo a la izquierda.

Yo lo que pretendo es utilizar 4 imágenes diferentes que son alargadas, para crear un efecto de borde roto, y que el interior del div esté coloreado por un color asignado desde css, y que será idéntico al de los bordes.

Me doy cuenta ahora de que el propio color de fondo del div, se verá solapado por los bordes, y se perderá el efecto de borde roto, ya que tanto los bordes como el div son del mismo color.

Esta es una imagen que representa el problema que tengo:

¿Sabe alguien si se pueden dar coordenadas o medidas concretas al color de fondo de un div?, si fuese así, evitaría que las imágenes utilizadas en los bordes, se solapasen con el color de fondo y lograría lo que pretendo.

pzin · #6 (**permalink**) 13/03/2013, 08:51

Yo usaría border-image y luego background-clip: padding-box para que el color de fondo del elemento empiece después del fondo del borde.

walvaRo · #7 (**permalink**) 13/03/2013, 10:07

Gracias por la pista Bonez, voy a probar tus propuestas. :)

yllyon · #8 (**permalink**) 13/03/2013, 10:16

Practicamente es lo que te han dicho, yo siempre uso background-image , background-color, etc.. pq alguna vez he puesto el background: a secas y no pasaba lo que tenia que pasar, desconozco el motivo y sinceramente tampoco me lo he planteado. simplemente prueba a usar background-image y a ver si ya sale ;)

walvaRo · #9 (**permalink**) 13/03/2013, 15:30

Hola de nuevo amigos, parece ser que utilizando el siguiente código no funciona y no se ven las imágenes en los bordes en ningún navegador:

Código:

	
background-image:
url(images/top_red.png) top no-repeat,
url(images/right_red.png) right repeat-y,
url(images/bottom_red.png) bottom no-repeat,
url(images/left_red.png) left repeat-y;

¿Está mal escrito algo?, ¿es necesario repetir todo con -webkit- y -moz-?

Ahora he comprobado que sí veo las imágenes utilizando tan sólo background, pero los códigos que proponéis:

Código:

background-clip:padding-box;
-moz-background-clip:padding-box;
-webkit-background-clip:padding-box;

, tampoco surten efecto, por lo que, cuando utilizo después la etiqueta background-color, automáticamente toda la div se ve completamente del color de fondo que he seleccionando, tapándose los bordes en el caso de utilizar tan sólo background.

He probado también el siguiente código con una única imágen cuadrada apropiada para el efecto que pretendo:

Código:

border-top-image:url(images/borde.png) repeat;
border-right-image:url(images/borde.png) repeat;
border-bottom-image:url(images/borde.png) repeat;
border-left-image:url(images/borde.png) repeat;
-moz-border-corner-image:url(images/borde.png) repeat;

He leido varios sitios donde hablan y explican como utilizar el anterior código css, e incluso lo he probado con los respectivos -moz- y -webkit-, pero sigue sin verse nada de nada.

CSS sigue muy verde en muchos temas por lo que veo.

pzin · #10 (**permalink**) 13/03/2013, 16:01

Este artículo explica en español cómo usar border-image.

Antes de seguir con esto, deberías de saber que no funciona con IE, en ninguna de sus versiones. Pensaba que funcionaría pero me di cuenta ahora mirándolo.

Se me ocurre que podrías usar la imagen del principio —si quieres que funcione con IE, sino usa border-image— asignándole el color blanco como color blanco (no transparente). Así el color de fondo no traspasa.

walvaRo · #11 (**permalink**) 13/03/2013, 16:28

Gracias Bonez, voy a leer el artículo que propones.

¡Ah!, también he leído por ahí en una comparativa que en IE no funciona el border-image. No se si en IE10 funcionará.

pzin · #12 (**permalink**) 13/03/2013, 16:38

Cita:

Iniciado por walvaRo

No se si en IE10 funcionará.

Según caniuse.com no funciona: http://caniuse.com/border-image

walvaRo · #13 (**permalink**) 13/03/2013, 16:42

He probado de nuevo este código:

Código:

border:10px solid transparent;
border-image:url(images/borde.png) 10 10 10 10 repeat;
-webkit-border-image: url(images/borde.png) 10 10 10 10 repeat;
-moz-border-image: url(images/borde.png) 10 10 10 10 repeat;

, y ahora logro ver la imágen en los bordes, pero desgraciadamente la anchura de la div aumenta en 20 píxeles, y si resto 20 píxeles a la div para compensar el borde, las divs anidades dentro se desplazan de línea, por lo que no puedo estar cambiando todos los anchos de todas las divs de nuevo, y cambiar de nuevo todos los estilos y tamaños de texto para que quepan en el nuevo ancho de las divs anidadas. ¿No existe la propiedad inside para los bordes, o algo parecido?

pzin · #14 (**permalink**) 13/03/2013, 16:46

Como te dije por el mensaje, usa box-sizing para cambiar el modelo de caja.

Código CSS:

Ver originalbox-sizing: border-box;

Así tanto el borde como el padding, formarán parte del ancho del elemento.

walvaRo · #15 (**permalink**) 13/03/2013, 17:14

Hola de nuevo, quisiera compartir unas capturas de diferentes navegadores, del efecto final de border-image sobre una div, y con una imagen escalada para comprobar la calidad del renderizado de cada navegador:

Como se puede ver, cada navegador hace lo que le da la gana, algunos ni lo hacen, y me sorprende el buen acabado del render de safari, de todas formas, deja mucho que desear que toda la div se rellene de imagen en algúnos navegadores.

En cuanto a la etiqueta box-sizing: border-box;, no hace si no empequeñecer el div, por lo que las divs anidadas dentro no caben y saltan de línea. Leeré mas sobre esta etiqueta.

pzin · #16 (**permalink**) 14/03/2013, 04:20

Cita:

Iniciado por walvaRo

En cuanto a la etiqueta box-sizing: border-box;, no hace si no empequeñecer el div, por lo que las divs anidadas dentro no caben y saltan de línea. Leeré mas sobre esta etiqueta.

Claro. Es que si buscas que el borde no forme parte del ancho, tendrá que formar parte de otra cosa. A algún sitio tendrá que moverse esa espacio que ocupa. Así que tendrás que recalcular el ancho que necesita ese elemento.

Yo por costumbre, en mi reset CSS siempre mete box-sizing: border-box —una práctica cada vez más común— para que afecte a todos los elementos del sitio. Es más cómodo y lógico trabajar así, aunque en su día echaramos pestes de IE6 por interpretar el modelo de cajas que ahora forzamos.

walvaRo · #17 (**permalink**) 14/03/2013, 04:50

¿Y por que empequeñece el div? No comprendo lo que hace la propiedad box-sizing: border-box;. ¿No existe una propiedad inside para los bordes?, la idea es que si se crea un efecto visual en los bordes de las divs, o en cualquier otro elemento html que pueda bordes, estos bordes puedan, a gusto del usuario, estar en el interior o el exterior del div. Una propiedad inside sería maravillosa.

En fin, no comprendo muy bien por que la orden de redimensionado de la div, si se hace desde e incluyendo el borde, resulta en una div mas pequeña. ¿A caso la propiedad box-sizing: border-box; no pretende ser una especie de inside?, ¿que tendrá que ver que la div cuente su tamaño en píxeles desde el límite del borde para incluirlo en la cuenta, con que esta se haga mas pequeña?

pzin · #18 (**permalink**) 14/03/2013, 07:18

Cita:

Iniciado por walvaRo

¿Y por que empequeñece el div?

No es que lo haga más pequeño, resulta que el modelo de caja tradicional lo que hace es agrandar el elemento al añadirle un borde o un padding.

Un elemento de 200 pixeles con un borde de 1 pixel y un padding de 20 pixeles mide 200 + (1*2) + (20 * 2) = 242 pixeles. Se multiplica el borde y el padding por dos ya que hay dos laterales. Pero el contenido interior seguirá siendo de 200 pixeles.
Un elemento con box-sizing: border-box con esas mismas medidas, medirá 200 pixeles, pero el contenido interior, será de 200 - (1*2) - (20*2) = 158 pixeles. Puede ser a lo que tú le llamas inside. Si el borde va hacia adentro, entonces tendrá que ocupar ese sitio adentro, ¿no?

Y en ambos casos el atributo width del elemento está definido en 200 pixeles, pero sólo en el segundo caso ocupa realmente 200 pixeles en la pantalla.

walvaRo · #19 (**permalink**) 14/03/2013, 07:53

No comprendo lo que dices.

Veamos, creas un div de 200 píxeles, y sin utilizar la propiedad box-sizing: border-box, tomas un captura de pantalla de la div, mides su anchura en píxeles desde photoshop, por ejemplo, y son 200 píxeles. Si existiese la propiedad inside en CSS3, ¿que importaría que el borde sean 10, 20, o 100 píxeles?, la anchura del div seguiría siendo 200 píxeles.

En mi caso, lo que yo intento, es colocar 4 imágenes en los 4 bordes de una div, arriba, derecha, abajo e izquierda. Pretendo que las imágenes que hacen de borde no se sitúen en el exterior de la div, si no que lo hagan en el interior. Lo ideal es que el lado de la imagen que mira hacia el exterior de la div esté alineado con el límite de esta, y que el contenido anidado dentro de la div siga contando con el espacio original indicado desde CSS. Intento que una div anidada dentro de la div contenedor, pueda situarse donde yo decida independientemente de la anchura o altura en píxeles del borde de la div contenedor. El contenido debe poder solapar al borde si hace falta y el borde interior no debe reducir el espacio interior disponible en la div. Con ninguno de los comandos que he investigado y que me has propuesto logro el resultado que pretendo al 100%, quizá es mi falta de hablidad, no lo se.

¡Aun así, gracias!

¡Un saludo!

pzin · #20 (**permalink**) 14/03/2013, 09:54

Cita:

Iniciado por walvaRo

No comprendo lo que dices.

Veamos, creas un div de 200 píxeles, y sin utilizar la propiedad box-sizing: border-box, tomas un captura de pantalla de la div, mides su anchura en píxeles desde photoshop, por ejemplo, y son 200 píxeles. Si existiese la propiedad inside en CSS3, ¿que importaría que el borde sean 10, 20, o 100 píxeles?, la anchura del div seguiría siendo 200 píxeles.

Es que no seguirá siendo 200 pixeles.

Puse un ejemplo aquí para que veas las diferencias: http://jsbin.com/idawem/1/edit.

pitufoweb · #21 (**permalink**) 14/03/2013, 20:05

Cita:

Iniciado por Bonez

Puse un ejemplo aquí para que veas las diferencias: http://jsbin.com/iqovaf/1/edit.

Un ejemplo de Canvas?

Saludos

pzin · #22 (**permalink**) 15/03/2013, 01:59

Cita:

Iniciado por pitufoweb

Un ejemplo de Canvas?

lol

No sé qué fue eso.

Edité el enlace.

Gracias por avisar pitufoweb.