写真背景囲み枠の透け感を変更する方法

 
今日は、写真背景の囲み枠で
文字を入れる部分の
透け感を変える方法のご紹介です。
 
 
どの部分の透け感が変わるの？
 

【例1：通常】

本文はここに入力してください。　
改行はShift+Enterで！

 

 

【例2：半透明】

本文はここに入力してください。　
改行はShift+Enterで！

 

 

変更する場所は？

 

囲み枠タグ内の

background:rgba(255,255,255,0.87);

の0.87の部分が透け具合になります。

（その前の255,255,255は白色という意味）

↓　↓　↓

<div style="padding:20px;background:url(https://stat.ameba.jp/user_images/20210115/19/atelier-plume-net/6b/a0/j/o0640064014882082665.jpg);border-radius:10px;box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.87);padding:5px;border-radius:5px;"><div style="border:4px double #EEA3A9;padding:20px;border-radius:5px;">本文はここに入力してください。改行はShift+Enterで！</div></div></div>

 

注意 囲み枠によっては

0.87ではなく、0.6などに

なっているものもあります。

 

数字はどう決めるの？

 

半角数字0～1までで設定します。

0が透明で1が不透明。

0.5だと半透明になります。

 

背景と文字の見えやすさで

透け感を調整してください。

 

もし「変えたいけれどうまくいかない！」

という場合は、お気軽に

LINE公式アカウントに

メッセージをくださいね♪

 

友だち追加

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow