93

http://www.ilikepixels.co.uk/drop/bubbler/からバブルチャットを生成しました

私のページでは、その中に数字を入れました

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

background-color中の数字に応じてバブルの を変えたいrgb

私のdivが

<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>

色はあってほしいrgb(100,255,255)

問題は、これが三角形に影響を与えないことです。

:before と :after が含まれるようにインライン css を作成するにはどうすればよいですか?

4

5 に答える 5

98

CSS 変数(より正確には CSS カスタム プロパティと呼ばれます)を使用して、それを行うことができます。

  • スタイル属性に変数を設定します。
    style="--my-color-var: orange;"
  • スタイルシートで変数を使用します。
    background-color: var(--my-color-var);

ブラウザの互換性

最小限の例:

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>

あなたの例:

.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>

于 2017-10-04T19:46:09.730 に答える
70

できません。インライン スタイルでは、要素を直接ターゲットにしています。そこでは他のセレクターを使用できません。

ただし、スタイルシートでさまざまな色を定義するさまざまなクラスを定義し、そのクラスを要素に追加することができます。

于 2013-01-21T10:34:27.127 に答える