2022/06/25 2022/07/13

【HTML+CSS】画像にlinear-gradientで透過グラデーションをかける方法

画像単体を透過させることはよくあったけど、透過グラデーションは初めてやったのかな？

まぁ覚えてないくらいやってなくてやり方わからなかったので、やり方まとめておきます。

言われれば、「あー、まぁそうだよね」って感じで難しくないんだけど、知らないと閃かないのよね。

画像に透過グラデーションをかける方法

オリジナル画像
オリジナル画像
完成図
完成図

HTML

<div class="container">
  <figure>
    <img src="" alt="">
  </figure>
</div>

至ってシンプル。

クラス名containerのdivで画像の背景となる水色の四角を作成する。

CSS

.container {
  position: relative;
  max-width: 1100px;
  width: 100%;
  height: 270px;
  background-color: #7BB7B3;
  border-radius: 40px;

  figure {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 130px;
      height: 270px;
      background-image: linear-gradient(270deg, transparent 0 10%, #7BB7B3 100%);
    }

    img {
      height: 100%;
      opacity: 50%;
      border-radius: 0 40px 40px 0;
    }
  }
}

.container

position: relative;
max-width: 1100px;
width: 100%;
height: 270px;
background-color: #7BB7B3;
border-radius: 40px;
  • widthとheightは設定必須
  • background-colorで背景色をつける
  • border-radiusで角丸にする
  • ポイントはposition: relative;でポジションの起点となるようにすること

.figure

height: 100%;
position: absolute;
top: 0;
right: 0;
  • heightを100％にして高さを合わせる
  • position: absolute; top:0 right:0で箱の右側にピタリと配置

&::after

content: '';
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 270px;
background-image: linear-gradient(270deg, transparent 0 10%, #7BB7B3 100%);
  • figureにafterで擬似要素を作る
  • 擬似要素をグラデーションをかけたい画像の左側に配置
  • 擬似要素の大きさは好みで設定
グラデーションの方向
  0deg: to top
 90deg: to right
180deg: to bottom
270deg: to left

今回は左側にグラデーションをかけたいから270deg。
to leftと記述してもOK。

linear-gradientの投下範囲のバランス

linear-gradientは2つまでオプション値を設定可能。

1つ目は開始位置。
2つ目はそこまではその色のままにしておく位置。

今回の例だと、（width130px内で右を起点に左へ向かって0％→10％）はそのままの色でグラデーションはかけない設定。

img全体にグラデーションかけたい場合はwidthとheightを100%にしたらOK。

そこらへんは文章で理解するよりも、実際に検証ツールを見ながら調整するの方がが手っ取り早いかなと。

READ MORE IN BLOGS