デザインコード紹介

Chapter1 背景・画像・写真装飾

写真のドットパターン背景ずらし  

更新日:

写真のドットパターン背景ずらしのWebデザイン画像

HTML

<div class="pic">
   <img src="picture.jpg" alt="店内にいる女性の後ろ姿の写真">
</div>

CSS

.pic {
   position: relative;
}

.pic img {
   position: relative;
   z-index: 2;
}
.pic::before {
   content: '';
   position: absolute;
   bottom: -30px;
   right: -30px;
   width: 100%;
   height: 100%;
   background-image: radial-gradient(#ea987e 20%, rgba(0 0 0 / 0) 21%);
   background-size: 10px 10px;
   background-position: right bottom;
   z-index: 1;
}

できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。