23

CSSでスタイリングしたいものがいくつか並んでいます。背景にはさまざまな色を適用したいのですが、下の色を同じ色にして不透明度を下げたいので、次のように考えました。

span.foo{
    background-color: rgba(0,0,0,1); /*or whatever*/
    color:white;
}

span.foo:last-child{
    background-color: rgba(*,*,*,0.5); /*just an example*/
}

そのため、CSS3を使用するだけで、テキストの不透明度に影響を与えずに、定義済みの背景の不透明度を変更したいと思います。

これは可能ですか？

4

6 に答える 6

14

どうしようもないと思います。

Css はそれ自体が非常に制限されており、それでできることはあまりありません。

不透明度を追加できる唯一の方法は次のとおりです。

opacity: 0.5

ただし、上記は背景だけでなく、テキスト自体にも影響します。

ただし、背景ブロックをテキストから分離する方法でラップすることができるため、テキストの色は変更されません。

編集:フィドルを参照してください: http://jsfiddle.net/YfSn7/30/

しかし、それはややばかげているように見えるかもしれないので、それを使用することはあまりアドバイスしません.

物事を過度に複雑にするのではなく、実際に単純にしたい場合は、これは不可能であることを受け入れる必要があると思います.

于 2012-08-31T13:48:41.377 に答える
13

Sass がある場合:

background-color: rgba(white, 0.5);
于 2018-04-27T10:04:27.780 に答える
7

CSS 変数を使用できます。

span.foo {
    --background-color: 0, 0, 0;
    background-color: rgba(var(--background-color), 1);
    color: white;
}

span.foo:last-child {
    background-color: rgba(var(--background-color), 0.5);
}
于 2019-08-20T15:41:10.557 に答える
5

次のように JavaScript を使用して実行できます。

adjustHexOpacity (color, opacity) {
  const r = parseInt(color.slice(1, 3), 16);
  const g = parseInt(color.slice(3, 5), 16);
  const b = parseInt(color.slice(5, 7), 16);

  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';

}

于 2016-10-12T20:49:22.367 に答える
2

これを行う方法はありません。過度の値の繰り返しは、CSS の欠点の 1 つです。

したがって、標準色がの場合は、透明バージョンとしてrgba(0,0,0,1);必要になります。rgba(0,0,0,0.5);

少しの JavaScript を使用して、このクライアント側のようなことを行うこともできますが、それは正確にはきれいではありません。

于 2012-08-31T13:56:04.840 に答える