zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschiedliche Durchsichtigkeit von Elementen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.09.2020, 19:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2020
Beiträge: 3
bernadette befindet sich auf einem aufstrebenden Ast
Frage Unterschiedliche Durchsichtigkeit von Elementen

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>

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.09.2020, 21:13
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 140
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.09.2020, 07:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2020
Beiträge: 3
bernadette befindet sich auf einem aufstrebenden Ast
Standard

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;
                }

Geändert von bernadette (18.09.2020 um 07:58 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2020, 11:33
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.949
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 18.09.2020, 14:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2020
Beiträge: 3
bernadette befindet sich auf einem aufstrebenden Ast
Standard

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;
                }

Geändert von bernadette (18.09.2020 um 15:25 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
durchsichtigkeit, opacity

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:40 Uhr.