Transparenten Balken über ganze Seite

tomzeN · 13. Juli 2021

Hallo ihr Joomla verrückten,

ich möchte gerne mittels CSS einen Transparenten Balken über eine komplette Webseite erstellen der in den Slider läuft und das Bild des Sliders ein wenig durchblicken lässt.

Meine Überlegung wäre folgende:

Unter dem Slider gibt es eine Klasse #container_main die ich ansprechen wollte. Ich habe mir gedacht für diese Klasse einen Border anzulegen und diesen in das Modul des Slider zu schieben. Wie macht man das am besten? Oder bin ich hier voll auf dem falschen Weg?

Code

#container_main{

width: 100%;
border-top: 50px solid rgba(255,255,255,.5);
opacity:0,75

}

Re:Later · 13. Juli 2021

Das hängt ziemlich vom weiteren CSS der gesamten Seite ab, ob das ein falscher Weg ist oder wie aufwändig das wird.

Grundlegend kann man auch negative margins verwenden.

Code

margin-top: -30px;

Meist macht das aber spätestens keinen Spaß mehr, wenn man für diverse Bildschirmbreiten testet.

tomzeN · 13. Juli 2021

Aber verschiebe ich mit margin dann nicht die komplette klasse und nicht nur den Balken?

Wäre es vielleicht besser einen Balken nicht mit der Klasse container_main zu verknüpfen sondern eher eine eigene ID .balken anzulegen und diese in einem Modul unterhalb des Sliders aufzurufen?

Vom Prinzip möchte ich gerne folgendes wie in dem Link erreichen:

http://astridsc.cluster010.ovh.net/index.html

Elwood · 13. Juli 2021

Also in deinem Link finde ich jetzt keinen transparenten Balken!?

Stef · 13. Juli 2021

Zitat von Elwood

Also in deinem Link finde ich jetzt keinen transparenten Balken!?

Elwood , ich denke er meint der Balken unten dem Banner: opacity: 0.79;

Code

.Schatten-Balken {
    border-width: 0px;
    box-shadow: 6px 6px 8px rgba(0,0,0,0.1);
    border-color: #000000;
    background-color: #FFFFFF;
    opacity: 0.79;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=79)";
    filter: alpha(opacity=79);
}

Tags