1. ホーム
2. パソコン
3. HTML & CSS

【CSS】画像(サムネイル)の上のテキストを疑似要素を使って見やすくする方法 background: linear-gradient

投稿日 : 2023年04月18日 更新日 : 2023年04月18日

やりたいこと

疑似要素で影を作る方法

HTML

<div class="thumbnail thumbnail1"></div>
<div class="thumbnail thumbnail2"></div>
<div class="thumbnail thumbnail3"></div>
<div class="thumbnail thumbnail4"></div>

共通部分

.thumbnail {
  max-width: 400px;
  position: relative;
  margin-bottom: 20px;
  border: dotted 1px #666;
}
.thumbnail::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

sample2

.thumbnail1::before {
  background: rgba(0, 0, 0, 0.2);
}

sample3

 .thumbnail2::before {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 30% 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

sample4

.thumbnail3::before {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0)
  );
}

sample5

.thumbnail4::before {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.7)
  );
}

画像とテキストを追加

sample2

<div class="wrapper">
  <div class="thumbnail thumbnail1">
    <div class="text-wrapper1">
      <span class="title1">タイトル テキスト</span>
      <span class="title2">タイトル テキスト</span>
      <span class="title3">タイトル テキスト</span>
    </div>
  </div>
</div>

<style>
  .wrapper .thumbnail {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3 / 2;
    background: url(画像のURLを入力);
    position: relative;
    background-size: cover;
    background-position: 0%;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    border: dotted 1px #666;
  }
  .thumbnail::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .thumbnail1::before {
    background: rgba(0, 0, 0, 0.2);
  }
  [class^="text-wrapper"] {
    position: absolute;
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .text-wrapper1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

sample3

sample4

sample5

参考

「^=」の意味とは？ ページ内リンクのスムーススクロールやCSSの指定などに使えます‼

まとめ