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-colorBlase 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?

Das kannst du nicht. Mit Inline-Stilen zielen Sie direkt auf das Element. Sie können dort keine anderen Selektoren verwenden.

Sie können jedoch verschiedene Klassen in Ihrem Stylesheet definieren, die unterschiedliche Farben definieren, und dann die Klasse zum Element hinzufügen.

Sie können CSS-Variablen verwenden (genauer gesagt, benutzerdefinierte CSS-Eigenschaften).

• Legen Sie Ihre Variable in Ihrem Stilattribut fest: style="--my-color-var: orange;"
• Verwenden Sie die Variable in Ihrem Stylesheet: 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>

Der Schlüssel ist für background-color: inherit;das Pseudoelement zu verwenden.
Siehe: http://jsfiddle.net/EdUmc/

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

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