Ich habe ein Bubble-Chat-Ding von http://www.ilikepixels.co.uk/drop/bubbler/ generiert.
Auf meiner Seite habe ich eine Nummer eingefügt
.bubble {
position: relative;
width: 20px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #FFF;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
Ich möchte, dass sich die background-color
Blase entsprechend der Anzahl in der Blase ändertrgb
Also, wenn mein Div ist
<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>
Ich möchte, dass die Farbe ist rgb(100,255,255)
Die Sache ist, dass dies das Dreieck nicht beeinflusst.
Wie schreibe ich das Inline-CSS, damit es Folgendes enthält: Vorher und: Nachher?
Sie können CSS-Variablen verwenden (genauer gesagt, benutzerdefinierte CSS-Eigenschaften).
style="--my-color-var: orange;"
background-color: var(--my-color-var);
Browser-Kompatibilität
Minimales Beispiel:
div { width: 100px; height: 100px; position: relative; border: 1px solid black; } div:after { background-color: var(--my-color-var); content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
<div style="--my-color-var: orange;"></div>
Ihr Beispiel:
.bubble { position: relative; width: 30px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; text-align: center; background-color: var(--bubble-color); } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent var(--bubble-color); display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: 4px; left: -5px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #000; display: block; width: 0; z-index: 0; }
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>
quelle
Der Schlüssel ist für
background-color: inherit;
das Pseudoelement zu verwenden.Siehe: http://jsfiddle.net/EdUmc/
quelle
Wenn Sie es wirklich inline benötigen, beispielsweise weil Sie einige benutzerdefinierte Farben dynamisch laden, können Sie jederzeit
<style>
direkt vor Ihrem Inhalt ein Element hinzufügen .<style>#project-slide-1:before { color: #ff0000; }</style> <div id="project-slide-1" class="project-slide"> ... </div>
Beispiel für einen Anwendungsfall mit PHP und einigen (von WordPress inspirierten) Dummy-Funktionen:
<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style> <div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>
Seit HTML 5.2 ist es gültig, Stilelemente innerhalb des Körpers zu platzieren, obwohl es weiterhin empfohlen wird, Stilelemente im Kopf zu platzieren.
Referenz: https://www.w3.org/TR/html52/document-metadata.html#the-style-element
quelle
Ich habe ein ähnliches Problem durch Rahmenfarbe gelöst : erben
, sehen:
<li style="border-color: <?php echo $hex ?>;">...</li> li { border-width: 0; } li:before { content: ''; display: inline-block; float: none; margin-right: 10px; border-width: 4px; border-style: solid; border-color: inherit; }
quelle