背景画像にグラデーションのオーバーレイをかける方法

公開日 2021/2/14 最終更新日 2021/2/27

HTML
CSS
グラデーション

HTML

<div class="storyblok" style="background-image:url(<?php echo wp_get_attachment_url($fields['img']); ?>);">
<?php
$storyblok = array_slice(scf::get('STORY'), 1);
if (!empty($storyblok[0])) {
foreach ($storyblok as $fields) { ?>
<div class="storyblok" style="background-image:url(<?php echo wp_get_attachment_url($fields['img']); ?>);">
<div class="inner">
<div class="story-textarea fade">
<h3><?php echo $fields['title']; ?></h3>
<p><?php echo $fields['text']; ?></p>
</div> <!-- /story-textarea -->
</div> <!-- /inner -->
</div> <!-- /storyblok -->
<?php }} ?>

一番上の　class=”storyblok”　の背景画像の上に透過グラデーションをかける

CSS

.storyblok {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.storyblok::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:-moz-linear-gradient(top,rgba(0, 0, 0, 0.6),transparent,rgba(0, 0, 0, 0.6));
    background:-webkit-linear-gradient(top,rgba(0, 0, 0, 0.6),transparent,rgba(0, 0, 0, 0.6));
    background:linear-gradient(to bottom,rgba(0, 0, 0, 0.6),transparent,rgba(0, 0, 0, 0.6));
}

.storyblok .inner{
    position: relative;
    z-index: 5;
}

　.storyblokの疑似要素を利用して
透過グラデーションの背景を重ねる

そのままでは
テキストの上にも透過グラデーションがかかって
文字が読みづらいのでz-indexで上に来るように指定する。