おはようございます。

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編集用デザイン」 を使ったものです。
※画面、仕様は記事が投稿された時のものです。

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