16進数カラーコードをRGBA形式へ変更

CSSで(文字列は透過せず)背景だけを透過したい

 閲覧数:1144  投稿日: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>



タグ


preg_replace 



マテリアルカラーをランダムに3色取得 / 重複なし



週間人気ページランキング / 6-29 → 7-5
順位 ページタイトル抜粋 アクセス数
1 URLから、トップページ(index.html)判定 | ルーティング 8
2 指定文字列より前を取得 | 文字列(テキスト処理) 7
3 現在WebページのURLパスを第2階層まで取得 | パス 5
3 後ろから3文字削除 / 「18:00:00」→「18:00」 | 文字列(テキスト処理) 5
4 24時間以降の時刻を表示 / "02:30" → "26:30" | 日付および時刻関連 4
4 PHPで最後の「指定区切り文字」より後ろを取得 | 配列(型) 4
5 特定のHTMLタグのみ(aタグは除く)表示を許可 | エスケープ処理 3
6 switch文判定 … 「in_array」「array_keys」 | 配列(型) 2
6 foreachの中でswitch文 | 配列(型) 2
6 配列の空要素を削除(コールバック関数未使用) … array_filter() | 配列(型) 2
6 foreach内で一度「true」判定された後、次回以降「false」にする仕組みがないと、foreachの度に「true」「false」判定することができない | 条件分岐 2
6 後ろから3文字取得 | 文字列(テキスト処理) 2
6 「半角スペースもしくは全角スペースで区切られた文字列」先頭に指定文字列を付与 | 文字列(テキスト処理) 2
6 変数名の一部だけを可変にする | 可変変数(変数) 2
6 range( ) を使用して日付期間を配列生成 | 日付および時刻関連 2
6 配列の内容(ひらがな)を、読み(あ行~わ行)で分け、新たな配列へ格納 | 配列(型) 2
6 平均値、分散、標準偏差を求める | 統計 2
6 8桁の生年月日数字を分解 | 文字列(テキスト処理) 2
6 「指定文字」から「指定文字」までの文字列を削除 | マルチバイト文字列(テキスト処理) 2
6 配列の空要素を削除した後、添字を振り直す … array_diff() | 配列(型) 2
2025/7/6 1:02 更新