ocultar borde si div está por encima de

Tengo un <div id="content"> con un borde. Por encima de este div es otro <div id="header"> con texto. Me gustaría mostrar texto sobre el borde, pero no quiero mostrarlo.ocultar borde si div está por encima de

Para una explicación más fácil que he publicado mi código fuente aquí: http://jsfiddle.net/4HSEn/ y esto es lo que me gustaría lograr:

enter image description here

texto será dinámico y de fondo será degradado. Entonces la imagen no es una solución.

Sé cómo lograr esto con las etiquetas fieldset y legend, pero estoy buscando una solución con div o cualquier otra etiqueta.

encontrado algo aquí: Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag? pero para el legend se utilizó background-color: #FFF, que no me ayuda mucho:/

Fuente

2012-03-20 JercSi

por cierto. Gradiente de fondo no es compatible con IE9 http://caniuse.com/#search=gradient ... Así que tal vez necesites usar imágenes. – Engineer

Sé que IE no admite muchas cosas buenas. Usaré css3pie :) – JercSi

Solo curiosidad, ¿cuál es el problema con las etiquetas fieldset/legend? – j08691

-1

tu texto en un <span style="background-color: blue;"> o algo por el estilo. Eso debería funcionar.

Fuente

2012-03-20 18:46:00 uotonyh

Va en busca de un fondo degradado. Un fondo de color sólido se destacaría en contra de él. –

Teoría no probada, pero quizás podría darle a #header el mismo fondo degradado que el fondo del cuerpo, luego compensar la posición de fondo del encabezado # (usando js) con la posición X e Y con respecto al cuerpo?

Básicamente estoy sugiriendo un tipo de efecto de enmascaramiento.

EDITAR: reemplazó #content con cuerpo, para estar más en línea con el ejemplo de código actual de OP.

Fuente

2012-03-21 02:34:10 Jace

En realidad, me acerqué bastante a la solución con JS. Pero luego me di por vencido. He actualizado jsfiddle (url en la pregunta) con script que calcula qué color necesito. Si tendré tiempo, completaré el guión y publicaré mi solución. +1 por idea – JercSi

¿Por qué no empujar a su div contenido por el establecimiento de la primera posición a un valor negativo:

<div id="header" style="background-color: blue;">Demo</div> <div id="content" style="top: -15px; border: 1px solid white"></div>

Fuente

2012-03-21 02:52:16 arminb

ocultar borde si div está por encima de

Respuesta

Cuestiones relacionadas