0
410
ViewsDesvanecimiento de los bordes superior e inferior de un div semitransparente y desplazable con un video de fondo
Así que tengo un div que contiene una altura fija y dentro hay otro con overflow: auto que permite que el div sea desplazable. El div principal es semitransparente y en el fondo de todo se está reproduciendo un video.
HTML:
<div class="parent"> <div class="fade-top"/> <div class="fade-bottom"/> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. </div> </div>CSS:
.parent{ height: 2rem; position: relative background: hsla(180, 2%, 8%, 0.76); } .fade-top { poistion: absolute; top: 0; background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%); height: 50px; transition: opacity 0.3s; } .fade-bottom { position: absolute; bottom: 0; background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%); height: 50px; transition: opacity 0.3s; } .text { overflow: auto; }Pregunta:
¿Cómo hago para que las divisiones superior e inferior se desvanezcan gradualmente para mezclarlas con el color semitransparente principal?
Estado actual, el tablero rojo debe mezclarse con el fondo principal y no cortarse por la altura del principal:
·
Juan Pablo Isaza
2 answers
Answer question0
Puede usar After y before para atenuar la parte superior e inferior en lugar de usar divs adicionales. El código será como.
HTML
<div class="parent"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. </div> </div>CSS
.parent{ position: relative; width: 600px; background: hsla(180, 2%, 8%, 0.76); color: white; } .parent:before{ content: ""; width:100%; height:40px; background: linear-gradient(black, transparent); position:absolute; top: 0; } .parent::after{ content: ""; width:100%; height:40px; background: linear-gradient(transparent, black); position:absolute; bottom: 0; } .text { overflow-y: auto; height: 200px; }
·
Juan Pablo Isaza
Report
0
Así que finalmente encontré una forma de evitar esto usando la mask de propiedades CSS. Como esto:
HTML:
<div class="parent fade-top-bottom"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. </div> </div>CSS:
.parent{ height: 2rem; position: relative background: hsla(180, 2%, 8%, 0.76); } .fade-top-bottom { mask: linear-gradient(to top, transparent 10%, black 80%, transparent 100%), linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%); } .text { overflow: auto; }
·
Juan Pablo Isaza
Report
Answer question