0
181
ViewsHaga que cualquier parte de un DIV secundario sea opaca si está fuera del área del DIV principal sin desbordamiento: oculto
Tengo un div dentro de otro div y el usuario puede medir el div interno.
Actualmente, si lo miden, cubre completamente el div externo a menos que use overflow:hidden pero ya no pueden ver los bordes exteriores del div interno.
Idealmente, me gustaría que, si el innerdiv llega fuera del límite del externaldiv principal, me gustaría que cualquier cosa fuera de dicho límite se vea diferente, idealmente solo una configuración de opacidad.
Básicamente estoy buscando algo como
overflow:opacity .3;Actualmente solo tengo una configuración oculta o no oculta que se alterna, pero no es ideal.
Así es como se vería con el innerdiv configurado en color rojo. Cualquier parte de ese div interno que esté fuera del div externo es opaca. (El elemento rosa y rojo es el mismo div. La parte roja completa es el límite del div principal/externo).
Tengo un ejemplo que no funciona a continuación.
Estoy abierto a otras formas de configurar esto, pero si se puede hacer con la configuración a continuación, sería ideal.
Estoy bien haciendo esto con javascript/jQuery también.
.frame { width:200px; height:200px; margin-left:auto; margin-right:auto; display;block; margin-top:30px; } .outerdiv { width:200px; height:200px; background:gray; border:solid 1px #C0C0C0; } .innerdiv { width:240px; height:240px; position:absolute; background:red; margin-left:-20px; margin-top:-20px; opacity:.2 } <div class="frame"> <div class="outerdiv"> <div class="innerdiv"> </div> </div> </div>2 answers
Answer question0
Debido a que el div interno tiene una posición absoluta, sale del div externo. Si el div externo tenía una posición relativa, entonces el div interno no puede salir de él.
0
Podrías jugar con el modo de mezcla, con el marco más grande y con un fondo blanco.
Para ilustrar la idea, este fragmento bastante simple utiliza un modo de mezcla de diferencia en el elemento interior que se mezcla con el fondo blanco del marco para dar una especie de cian y con el negro del exterior para dar el rojo real.
Hay varias combinaciones diferentes posibles con el modo mix-blend. (Confieso que nunca he encontrado una buena manera de saber exactamente qué efecto tendrá cada uno de antemano y siempre termino experimentando).
.frame { width: 100vw; height: 100vh; margin-left: auto; margin-right: auto; display: inline-block; margin-top: 30px; position: relative; background: white; } .outerdiv { width: 200px; height: 200px; background: black; border: solid 1px #C0C0C0; margin-top: 20px; margin-left: 20px; } .innerdiv { width: 240px; height: 240px; position: absolute; background: red; margin-left: -20px; margin-top: -20px; mix-blend-mode: difference; } <div class="frame"> <div class="outerdiv"> <div class="innerdiv"> </div> </div> </div>