Ist Hintergrundfarbe: kein gültiges CSS?

432

Kann mir jemand sagen, ob das folgende CSS gültig ist?

.class {
    background-color:none;
}
css background-color NarfkX
quelle
10
Der Validator kann diese Art von Frage oft beantworten.
30.
10
Sie können verwirrt sein mit background:none;, was gültig ist und was die Hintergrundfarbe auf transparent setzt.
Herr Lister

Antworten:

552

Sie möchten wahrscheinlich, transparentda dies nonekein gültiger background-colorWert ist.

Die CSS 2.1-Spezifikation gibt Folgendes für die background-colorEigenschaft an:

Value: <color> | transparent | inherit

<color>kann entweder ein Schlüsselwort oder eine numerische Darstellung einer Farbe sein. Gültige colorSchlüsselwörter sind:

Aqua, Schwarz, Blau, Fuchsia, Grau, Grün, Limette, Kastanienbraun, Marine, Oliv, Orange, Lila, Rot, Silber, Blaugrün, Weiß und Gelb

transparentund inheritsind selbst gültige Schlüsselwörter, aber nonenicht.

James Allardice
quelle
25
Ja. Da der Anfangswert ist transparent, verwenden Sie diesen Wert , wenn Sie die Hintergrundfärbung deaktivieren möchten.
Herr Lister
1
Keiner von diesen wird auf einen vorherigen Wert zurückgesetzt (dh wenn durch eine andere CSS-Regel festgelegt :(
Pstanton
2
@pstanton in deinem Fall musst du Hintergrundfarbe geben: transparent! wichtig;
Herr
Dies erinnert mich an den Versuch, die Schriftfarbe zu verwenden, als ich mit dem Codieren anfing. Natürlich colornicht font-color. Macht so viel Sinn, wann immer eine andere Schriftart fontvor sich hat ...
serraosays
@herr Aber immer noch, wie pstanton sagte, würde das Festlegen der transparenten Hintergrundfarbe die vorherigen CSS-Eigenschaften überschreiben! Gibt es eine Möglichkeit, diese Hintergrundfarbeneigenschaft so zu entfernen, dass die CSS-Eigenschaft von der vorherigen übernommen wird?
SE_User
159

Nein, transparentstattdessen verwenden none. Sehen Sie sich das Arbeitsbeispiel hier in diesem Beispiel an, wenn Sie es ändern transparent, nonefunktioniert es nicht

benutze wie .class { background-color:transparent; }

Wo .class ist, benennen Sie Ihre transparente Klasse.

Jitendra Vyas
quelle
In meinem Beispiel ist es genau umgekehrt. Wenn Sie keine in transparent ändern, funktioniert dies nicht. Ich muss wirklich keine verwenden: jsfiddle.net/BkAad
Hrvoje Golcic
Ändern Sie in Ihrem Beispiel in body *: not (.exception) {Hintergrundfarbe: transparent}. Sie müssen das! Wichtige entfernen, da dies alle anderen darin zwingt, diese Eigenschaft zu haben. Und auf der Innenseite verwenden Li (s) lieber die Hintergrundfarben-Eigenschaft als die Hintergrundfarbeigenschaft nur für die Hintergrundfarbe.
Yveslebeau
67

Die Antwort ist nein.

Falsch

.class {
    background-color: none; /* do not do this */
}

Richtig

.class {
    background-color: transparent;
}

background-color: transparenterreicht das gleiche, womit Sie es machen wollten background-color: none.

Sajidur Rahman
quelle
7 
.class {
    background-color:none;
}

Dies ist keine gültige Eigenschaft. Der W3C-Validator zeigt folgenden Fehler an:

Wert Fehler: Hintergrundfarbe keine ist kein Hintergrundfarbenwert: keine

transparentMöglicherweise wurde während der Entwicklung der CSS-Spezifikation ein besserer Begriff anstelle von 0oder als noneWerte ausgewählt .

Barun
quelle
2
Und dies wiederholt das, was James vor zweieinhalb Jahren gesagt hat, aber in einem nicht geschnittenen und übertragbaren Format. ; ^)
Ruffin
6

CSS Level 3 gibt den unsetEigenschaftswert an. Von MDN :

Das nicht gesetzte CSS-Schlüsselwort ist die Kombination aus dem anfänglichen und dem geerbten Schlüsselwort. Wie diese beiden anderen CSS-weiten Schlüsselwörter kann es auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzform all. Dieses Schlüsselwort setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie von ihrem übergeordneten Wert erbt, oder auf ihren Anfangswert, wenn nicht. Mit anderen Worten, es verhält sich wie das ererbte Schlüsselwort im ersten Fall und wie das ursprüngliche Schlüsselwort im zweiten Fall.

Leider wird dieser Wert derzeit nicht in allen Browsern unterstützt, einschließlich IE, Safari und Opera. Ich schlage vor, transparentvorerst zu verwenden.

Gert Hengeveld
quelle
3

Schreib Dies: 

.class {
background-color:transparent;
}
Abolfazl Miadian
quelle
2
Bitte erläutern Sie Ihren Code und wie er zur Lösung des Problems beiträgt! - Aus dem Rückblick
Luca Kiebel
OK. Hintergrundfarbe ist ein CSS-Attribut und kann wie jedes CSS-Attribut einen gültigen und einen ungültigen Wert haben. Ein gültiger Wert für die Hintergrundfarbe kann eines der folgenden Formate sein: # 5f9 oder # 56f293 oder transparent. transparent bedeutet, dass Sie keine oder keine Hintergrundfarbe wünschen.
Abolfazl Miadian
1
wow - 6 Jahre nach der Frage (und der Antwort) antworten Sie mit einem Duplikat?
NarfkX
Die Zeit des Fragens ist nicht wichtig, da jeden Tag einige Leute diese Seite oder eine andere alte Seite besuchen, um Antworten zu erhalten. Ich denke, meine Antwortsyntax ist klarer!
Abolfazl Miadian
1

Daher möchte ich das Szenario erläutern, in dem ich diese Lösung verwenden musste. Grundsätzlich wollte ich das von einem anderen CSS festgelegte Hintergrundfarbenattribut rückgängig machen. Das erwartete Endergebnis war, dass es so aussah, als hätte das ursprüngliche CSS das Hintergrundfarbenattribut nie angewendet. Die Einstellung background-color:transparent;machte dies effektiv.

Binita Bharati
quelle
1
Ich finde diesen Hintergrund: Transparent funktioniert bei mir nicht, um eine Hintergrundfarbe zu überschreiben, die von einem anderen CSS festgelegt wird. Wenn ich Hintergrund wähle: rot; Zum Beispiel - das wird funktionieren. Aber Hintergrund: transparent; lässt zu, dass die andere CSS-Hintergrundfarbe erhalten bleibt. Irgendwelche Ideen, wie man das aufhält?
Hilfs Joel