CSSで背景画像の出力　～透過編～

投稿日：2016年3月7日更新日：2020年5月17日

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。

一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単なんですが、背景画像には少し工夫がいります。

通常のCSSのほかに背景画像だけに用意したCSSが必要になってきます。

/**  通常のCSSは下記のように書きます。 **/
#customer_login{
    padding: 0.5em;
    margin:0 auto;
    position: relative;
    width: 908px;
    height: 500px;
    text-align: center;
    font-size:18pt;
    color: #000;
    z-index:1;
}

/**  背景画像のCSSは下記のように書きます。 **/ 
#customer_login::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
　　 /** ここにopacityを書いておきましょう。**/
    opacity: 0.5; 
    z-index: -1;
    background:  url(../images/customer_login_back.jpg);
    /** 背景画像の大きさをここで決めます。**/
    background-size: 480px 476px; 
    /** position的なものは下記で制御します。**/
　　 background-position: center 40px;
    background-repeat: no-repeat;
}

/** 通常のCSSは下記のように書きます。 **/

#customer_login{

padding: 0.5em;

margin:0 auto;

position: relative;

width: 908px;

height: 500px;

text-align: center;

font-size:18pt;

color: #000;

z-index:1;

}

/** 背景画像のCSSは下記のように書きます。 **/

#customer_login::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

　　 /** ここにopacityを書いておきましょう。**/

opacity: 0.5;

z-index: -1;

background: url(../images/customer_login_back.jpg);

/** 背景画像の大きさをここで決めます。**/

background-size: 480px 476px;

/** position的なものは下記で制御します。**/

　　 background-position: center 40px;

background-repeat: no-repeat;

}

参考リンク

Transparent Background Images

CSS Background Opacity [duplicate]

CSSで背景画像の出力 ～透過編～

CSSで背景画像の出力　～透過編～