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

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

 閲覧数:1107  投稿日: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色取得 / 重複なし



週間人気ページランキング / 5-2 → 5-8
順位 ページタイトル抜粋 アクセス数
1 配列キー内に「指定文字列が含まれるキー」と「その値」を抽出して、新しい配列を返す | 配列(型) 6
2 8桁の生年月日数字を分解 | 文字列(テキスト処理) 4
3 本日が「第何何曜日」の当日に該当するか、を判定 | 日付および時刻関連 3
3 PHPで最後の「指定区切り文字」より後ろを取得 | 配列(型) 3
3 現在WebページのURLパスを第2階層まで取得 | パス 3
3 配列の内容(ひらがな)を、読み(あ行~わ行)で分け、新たな配列へ格納 | 配列(型) 3
4 array_count_values / 配列の要素が持つ値の出現回数をカウント | 配列(型) 2
4 2章(集合知プログラミング) カテゴリー 2
4 指定文字列より前を取得 | 文字列(テキスト処理) 2
4 配列の要素を置換して結果を配列で返す array_replace() | 配列(型) 2
4 URLから、トップページ(index.html)判定 | ルーティング 2
5 土日判定 | 日付および時刻関連 1
5 対象文字列へ対して、一致したすべての文字列を置換する標準関数 / str_replace | 文字列(テキスト処理) 1
5 stdClassで、指摘キー毎の数をカウント後、新たなキー「count」として追加 / array_count_values(array_column()) | ビルトインクラス(クラス) 1
5 日付文字列を比較して、年月日が異なる場合は年月日を、同一年の場合は月日を返す、同一年月の場合は月日を返す。※1日を厳密に直近24時間以内で判定 | 日付および時刻関連 1
5 多次元配列の「一次元要素数」もしくは「全次元要素数」をカウント | 多次元配列(型) 1
5 平均値、分散、標準偏差を求める | 統計 1
5 文字列(テキスト処理) カテゴリー 1
5 配列のキーを取得する array_keys() | 配列(型) 1
5 投稿日時をTwitterのように「★分前」「★時間前」という文字列変換するユーザ定義PHP関数 | 日付および時刻関連 1
2025/5/9 1:02 更新