Bedecken Sie ein Div mit einer transparenten Überlagerung

Question

Ich habe eine Seite mit einem zweispaltigen Layout, wo beide Spalten einzeln scrollen und dynamische Größe haben. Ich würde gerne eine der Spalten in einem transparenten hellgrauen Div abdecken, so dass es inaktiv aussieht.

Das Layout wird mithilfe des CSS-Rasterlayouts erstellt.

<div class="container"> 
    <div class="column"> 
    Left content 
    </div> 
    <div class="column"> 
    Right content 
    </div> 
</div> 

Css:

.container { 
    display: grid; 
    grid-template-columns: calc(50%) calc(50%); 
    grid-template-rows: 100%; 
    height: 100px; 
} 

.column { 
    overflow-y: scroll; 
} 

ist hier ein JSFiddle, aber es wird nur in Chrome arbeiten, und Sie müssen "Experimental Webplattformfunktionen" in Chrom ermöglichen: // flags: https://jsfiddle.net/152on3bc/ (es wird Arbeiten Sie auch in Electron, wenn Sie das einrichten wollen)

Der gewünschte Effekt würde so aussehen (gleiche Vorbehalte re: chrome: // Flags): https://jsfiddle.net/hawsfL9t/1/ aber das funktioniert nicht, wenn Sie das linke div scrollen.

Da dies für eine Elektronen-App ist, ist jede Lösung, die nur in Chrome oder Electron funktioniert, in Ordnung. Die Verwendung von einfachem JavaScript ist ebenfalls in Ordnung, es muss nicht nur CSS sein.

Answer 1

Sie können dem div eine Klasse hinzufügen, die inaktiv angezeigt werden soll.

<div class="column inactive"> 

und in der CSS-Einsatz:

.inactive { 
    opacity: 0.5; 
} 

Wenn Sie Farben verwenden möchten, können Sie:

"Transparenz RGBA mit".

* Die Post wurde aktualisiert.

Ich hoffe, es hilft. :)

.container { 
 
    display: grid; 
 
    grid-template-columns: calc(50%) calc(50%); 
 
    grid-template-rows: 100%; 
 
    height: 100px; 
 
} 
 

 
.column { 
 
    overflow-y: scroll; 
 
} 
 

 

 
.left { 
 
    float: left; 
 
    width: 50%; 
 
    } 
 

 
.right { 
 
    float: right; 
 
    width: 50%; 
 
    } 
 

 
.inactive { 
 
    background: rgba(76, 175, 80, 0.5); 
 
    opacity: 0.5; 
 
    }

<div class="container"> 
 
    <div class="column left"> 
 
    <p>Left content<br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p> 
 
    </div> 
 
    
 
    <div class="column right inactive"> 
 
    <p>Right content<br><br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p> 
 
    </div> 
 
    
 
</div>

Answer 2

Sie können Overlay-Klasse erstellen, wo Sie deaktiviert oder inaktiv als

<div class="overlay"> 

und Stil als

.overlay{ 
    opacity: 0.5; 
    pointer-events: none; 
} 

Grüße zeigen wollen.

Answer 3

Es ist eine sehr nützliche jQuery-Plugin für die Verpackung div mit transparenten div verfügbar es jQuery BlockUI Plugin ist

durch dieses Plugin verwenden, können Sie Block ui in jedem Elemente anwenden, wie unten

erwähnt

UI Blocking

$('div.test').block({ 
        message: '<h1>Processing</h1>', 
        css: { border: '3px solid #a00' } 
       }); 

Unblocking UI

$('div.test').unblock(); 

Answer 4

oder Sie können eine Klasse inaktiv hinzufügen.

<div class="column inactive">

in CSS: .inactive { background:rgba(255,255,255,0.5); }

und entfernen Sie alle Textabschnitt Hintergrundfarben.

Answer 5

Sie können die absolut positionierte Idee verwenden, mit der Sie gearbeitet haben, und JavaScript verwenden, um die Höhe der Überlagerung auf die Höhe des gescrollten Inhalts einzustellen.

var h = document.getElementById('column2').scrollHeight; 
 
var block = document.getElementById('block'); 
 
block.style.height = h + 'px';

.container { 
 
    display: grid; 
 
    grid-template-columns: calc(50%) calc(50%); 
 
    grid-template-rows: 100%; 
 
    height: 100px; 
 
} 
 

 
.column { 
 
    overflow-y: scroll; 
 
    position: relative; 
 
} 
 

 
.block { 
 
    position: absolute; 
 
    background: pink; 
 
    opacity: 0.5; 
 
    width:100%; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit urna a purus consequat tristique. Nam sed quam rhoncus, bibendum lacus vel, bibendum ligula. Maecenas semper, libero sit amet pretium ultrices, lorem dui laoreet felis, sed elementum libero orci eget risus. Sed sed mi enim. Ut sit amet est non metus ultrices tristique vel at velit. Praesent ultrices, libero rhoncus congue porta, metus elit pellentesque lectus, id blandit erat sem id nunc. Sed pretium auctor sapien, et molestie dolor aliquet et. Etiam pulvinar tristique nisi, et condimentum neque maximus ut. Integer quis ex lorem. Suspendisse nec arcu ut elit dictum consequat ac ut nibh. Praesent pretium consequat nulla id dictum. Vivamus lobortis ullamcorper nibh, a fringilla ligula interdum vitae. Cras dignissim, mi a hendrerit posuere, mi arcu lacinia dui, placerat ullamcorper dui arcu in ante. 
 
    </div> 
 
    <div class="column" id="column2"> 
 
    <div id="block" class="block"> 
 
    </div> 
 
    Suspendisse consequat commodo egestas. In consequat augue vel diam fermentum vehicula. Mauris faucibus arcu quam, vitae finibus nulla facilisis non. In ultricies est a justo consectetur, nec volutpat justo varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit gravida varius. Quisque at tempus nulla, ut mattis eros. 
 
    </div> 
 
</div>