コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSSCSS|背景画像の上に背景色を重ねる方法CSS2019.02.7CSS|背景画像の上に背景色を重ねる方法スタイルシートで背景色の上に文字を入れたい。そのままだとテキストが見にくくなってしまうから、画像の上に色を重ねたい、そんなときにCSSで解決させる方法についてお話します。テキストを上に移動させる背景画像の上に背景色を重ねる方法backgroundプロパティは、背景画像か背景色のどちらか1つしか指定できませんので1つのbackgroundプロパティだけだと対応できません。そのため、次のような方法をとります。本来の要素には背景画像・その疑似要素::beforeもしくは::afterに背景色を入れるボタンで表示を切り替えてご覧ください。1;}↑これが結論です。本来、背景を指定したかった要素には画像を入れて、その要素の疑似要素::beforeもしくは::afterに背景色を指定するという方法です。これだけだとうまく表示できないので細かい調整が必要ではあります。以下、順を追ってお話します。擬似要素(背景色)を追加するまずは、疑似要素を追加します。rgba(0,0,0,.5);}これは単純に疑似要素を追加して、背景色を入れただけの状態です。これだけだと、疑似要素には何も入っていませんし、::afterは「要素の後(つまり下)」に追加されるものなのでいずれにしても何も起こりません。次にpositionプロパティを使って画像の上に背景色を重ねて、さらに画像と同じサイズにします。それが下記の方法です。relative;を指定します。それから、疑似要素にposition:absolute;で絶対位置を指定した後、上下左右の値をそれぞれ”0′′にします。すると背景画像を入れた要素の上下左右にピタッと背景色が収まります。お気づきだと思いますが、この状態だとテキストの上に背景色が来てしまっているので意味がありません。次はテキストを一番上に重なるようにします。relative;を指定して位置を変更できるようにします。1;を指定して、一番上にテキストが重なるようにします。z-indexの値は、数字が大きいほど上に要素が来ますので、”1′′でも上に来ないときは数字をもっと大きくしてみてください。以上が、背景画像の上に背景色を重ねる方法でした。