デザインコード紹介
Chapter1 背景・画像・写真装飾
写真の背景斜線ずらし
更新日:
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: -15px;
right: -15px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(-45deg, #d34e23 0px, #d34e23 2px, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%);
background-size: 8px 8px; /* 追加コード */
z-index: 1;
}
更新履歴
HTMLタグ修正
CSSに『background-size: 8px 8px;』を追加
HTMLタグの『"(ダブルクォーテーションマーク)』抜け追加
できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。