記事の背景を半透明にする

おはようございます。
CSS勉強中スタッフです


半透明のこういうデザインにしたい


今日は記事の背景を半透明にチャレンジ


半透明にする前に、ブログ全体に背景を敷いておいてね(^-^)/
背景が真っ白だと半透明にしても、真っ白だから
「ブログ全体に背景画像を敷く」この記事を参考にしてね



CSSのなかから、記事の背景を書く箇所を探す

まずここを探す

/* (3-6) 記事
--------------------------------------------*/

そこ箇所の下あたりの .skinArticle
今回はここにCSSを書くよ

.skinArticle

CSSを書く

.skinArticleの 「 .skinArticle{ 」 から 「 } 」 の間を下記のように修正します

.skinArticle{
border:0;
background:url(http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png);
}

できたかな



半透明の画像について
上のCSSの
background:url(画像のパス);
画像のパスの箇所は、もともと用意してある画像のパスを使ってるよ

白い半透明
http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png

黒い半透明
http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_000_8.png

黒い背景がよかったら、黒い半透明も使ってみてね








※推奨環境 でお試しください
※CSS編集がうまくいかないときは、この記事⇒「【Tips】CSS編集がうまくできないとき」を参考にしてください。
※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったものです。
※画面、仕様は記事が投稿された時のものです。