CSSで(文字列は透過せず)背景だけを透過したい
閲覧数:1365
投稿日:2017-11-18
更新日:2017-11-18
opacityを使用すると？
・文字列まで透過してしまう
CSSで(文字列は透過せず)背景だけを透過するには？
・RGBA形式を使用するしかない
コード
<?php
//RGB数値に変換する16進数カラーコード
$colorCode = '#2196F3';
//「#******」形式で16進数カラーコードを受け取った場合「#」を削除
$colorCode = preg_replace("/#/", "", $colorCode);
//「******」形式を、2つずつ「**」に区切る
//hexdec関数で変換して配列へ格納
$rgbAry["red"] = hexdec(substr($colorCode, 0, 2));
$rgbAry["green"] = hexdec(substr($colorCode, 2, 2));
$rgbAry["blue"] = hexdec(substr($colorCode, 4, 2));
var_dump($rgbAry);
?>
<div style="background-color:rgba(<?php echo $this->escape($rgbAry['red']); ?>,<?php echo $this->escape($rgbAry['green']); ?>,<?php echo $this->escape($rgbAry['blue']); ?>,0.3);">
</div>結果
array(3) {
["red"]=>
int(33)
["green"]=>
int(150)
["blue"]=>
int(243)
}
<div style="background-color:rgba(33,150,243,0.3);">
</div>