Unterschiedliche Durchsichtigkeit von Elementen

bernadette · #1 (**permalink**) 17.09.2020, 18:01

Hallo,

Ich würde gerne eine Kopfzeile gestalten. in der das Hauptelement Transparenter ist als das Element links und rechts?

CSS Code

Code:

            .All.Kopfzeile
                 { 
                    background-color: lightskyblue;
                    opacity: 0.2;
                    width: 800px;
                    height: 50px; 
                    margin-top: 20px;

                }

                .All.Kopfzeile.Bild{
                opacity: 0.8; 
                float: right;
                }

                .All.Kopfzeile.Suchmaske{
                opacity: 0.9; 
                float: left;
                }

HTML-Code:

        <div Class="All Kopfzeile"> 
            <img src="Picture/Hauptbild.PNG" width="150px" height="50px" 
           Class="Bild">
             <form style="float: right;" Class="Suchmaske"> 
                 <p>
                <label for="text">Suche</label>
                <input type="text" id="text">
                 </p>
            </form>
        </div>

Sailor56 · #2 (**permalink**) 17.09.2020, 20:13

Im CSS fehlen Leerzeichen. Es muss...

Code:

 .All.Kopfzeile. Bild{
                opacity: 0.8; 
                float: right;
                }

                .All.Kopfzeile. Suchmaske{
                opacity: 0.9; 
                float: left;
                }

heißen.

bernadette · #3 (**permalink**) 18.09.2020, 06:40

Vielen Dank für die Antwort.

Leider hat das auch nicht funktioniert.

Aber ich habe jetzt eine Lösung gefunden.

HTML-Code:

background: rgba(200, 3, 4, .2);

So das, dass Style im ersten Container kein opacity verendet.

HTML-Code:

            .All.Kopfzeile
                 { 
                    
                    background: rgba(200, 3, 4, .2);
                    width: 1000px;
                    height: 50px; 
                    margin-top: 20px;
                }

                .All.Kopfzeile. Bild{
                opacity: 0.8; 
                float: right;
                }

                .All.Kopfzeile. Suchmaske{
                opacity: 0.9; 
                float: left;
                }

protonenbeschleuniger · #4 (**permalink**) 18.09.2020, 10:33

Das Leerzeichen ist falsch!
Es gibt keine Elemente mit der Bezeichung "Bild" oder "Suchmaske". Wenn es funktioniert, dass ist es Zufall.

Es solte so aussehen (wobei das float in der suchmaske von der angabe im Element überschrieben wird):

Code:

.All.Kopfzeile { 
                    background: rgba(200, 3, 4, .2);
                    width: 1000px;
                    height: 50px; 
                    margin-top: 20px;
}

.All.Kopfzeile .Bild {
                opacity: 0.8; 
                float: right;
}

.All.Kopfzeile .Suchmaske {
                opacity: 0.9; 
                float: left;
}

bernadette · #5 (**permalink**) 18.09.2020, 13:57

Danke für den Hinweis.

Jedoch
Wenn ich es aber so anwende und das

Code:

background

mit

Code:

opacity

überschreibe ist wieder alles auf diesen einen Wert durchsichtig. Die anderen beiden Elemente sind dann rechts?

Da ich jetzt Anfänger*in bin mal die allgemeine Frage. Wie ich Klassen vererbe.
Bislang habe ich keinen gute Beschreibung dazu gefunden wo dies mit den Punkten erklärt wird.

Bsp:

Code:

.Klasse1 .Klasse1_Ergaenzung{}

Mit dem Leerzeichen gelten die aufgeführten Eigenschaften nur wenn ich diese innerhalb der Klasse1 verwende so wie ich es hier im HTML Code getan hatte. So das ich eine eigenständige Klasse "Suchmaske" verwenden könnte.

Habe ich das richtig verstanden?

HTML-Code:

        <div Class="All Kopfzeile"> 
            <img src="Picture/Hauptbild.PNG" width="150px" height="50px" 
           Class="Bild">
             <form style="float: right;" Class="Suchmaske"> 
                 <p>
                <label for="text">Suche</label>
                <input type="text" id="text">
                 </p>
            </form>
        </div>

Als Beispiel ich möchte, dass die Eigenschaften der Klasse "All" auch in der Klasse "Kopfzeile" gelten. Ohne das ich die Eigenschaften explizit mit hinschreiben muss?

Code:

        .All{
                margin-left: auto;
                margin-right: auto; 
                padding-left: 200px;
                padding-right: 20px;
            }
/*--------------------------------------------------------*/   
 
                .All.Kopfzeile
                 { 
                    background: rgba(153, 255, 255, .2);
                    width: 100%;
                    height: 50px; 
                    margin-top: 20px;
                }

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Klassen den Elementen zuweisen oder die Eigenschaften den Elementen?	helloworld	CSS	3	13.05.2012 21:25
div als inline Hintergrund auch bei block Elementen	css7545	CSS	2	22.06.2009 22:16
Floatende Liste mit absoluten Elementen	-Oliver-	CSS	5	26.09.2008 11:24
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument	dimension	CSS	1	25.07.2008 13:49
Unterschiedliche fonts - unterschiedliche größe	denniz	CSS	6	15.01.2007 15:22