img要素の画像に斜めストライプを加えるCSS

img要素の画像に斜めストライプを加えるCSS

2019-12-14
テクノロジー

流行った斜めストライプを、Photoshop使わずに画像に付与したい、そんな時に使えるかもしれないCSS。

考え方は、画像に透明度を掛け、背景を透かす方法。

目次

目指す結果

今回は、ストライプが重なったっぽい感じにしたいので、背景要素をストライプにするCSSを使ってみることにした。

元の画像

目指す結果：Photoshopで加工した画像（レイヤー描画モードは乗算)

コード

元の画像のHTML


<div class="image_stripe">
　<img src="/images/motogazou.jpg" alt="イラスト" />
</div>

CSS


.image_stripe{
/*ストライプにする
 background: linear-gradient(
  -45deg,
  #cb98ff 25%,
  #d0ff92 25%,
  #d0ff92 50%,
  #cb98ff 50%,
  #cb98ff 75%,
  #d0ff92 75%,
  #d0ff92 );
/*ストライプの大きさを調整する
 background-size:7px 7px;
}
.image_stripe img{
/*画像を透明にする
 opacity:0.6;
/*imgをブロック要素にする
 display:block;
}

結果

イラスト

下がはみ出る問題があったが、
ベースラインの影響らしく、子のimgを、display:block;で、ブロック要素に変換する！
で解決した！
スッキリ。

参考