mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

はてなブログ:自分用メモ#2 / 画像に文字


ぺぺっとコピーして使うかもしれない自分用メモ、画像に文字を載せていく

Life is Strange

<div class="life"><img src="###.jpg" /> <p><i class="fas fa-reply-all"></i>好きな文字</p></div>
/* 画像の上にアイコンと文字セット */
.life { /*親div*/
  position: relative; /*相対配置*/
/* 画像サイズを変えたい時はココにwidth: ###px; */ 
  }

.life p {
  position: absolute; /*絶対配置*/
  color: #f5f5f5; /*文字色*/
  font-weight: bold; /*太字に*/
  font-size: 30px; /*サイズ*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 50%; 
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  text-align:center; /*pタグ内で更に中央寄せ*/
  }

.life img {
  width: 100%;
  }

/*classがfasのアイコンに対して*/
.life .fas {
  display:block;/*前後に改行*/
  padding-bottom:10px;/*文字との隙間*/
  font-size: 3em;/*文字の3倍のサイズに*/
  color: rgba(255, 255, 255, 0.6);/*半透明*/
  }
/* 文字無しアイコン単独用 */
.life .fas {
position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
  color: white;/*アイコン色*/
  font-size: 60px;/*サイズ*/
  }