]。"/> ]。">
ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像に透かしを追加する
目的:
いくつかの画像に透かしを追加します。
(学習ビデオの推奨事項: css ビデオ チュートリアル )
画像と透かしの表示領域
<div class="watermark-image"></div>
スタイル
.watermark-image { position: relative; width: 300px; height: 300px; background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489746806388&di=68436cfc9319b2f3afeffa9a984a2dc2&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519224441_VfMWR.thumb.700_0.jpeg') no-repeat; background-size: 300px; border: 1px dotted #f00; } .watermark-image:before { content: "Message here."; font-size: 21pt; position: absolute; top: 50%; left: 50%; margin-left: -80px; background-color: rgba(255, 255, 0, 0.7); -webkit-transform:rotate(-45deg); }
関連する推奨事項: CSS チュートリアル
以上がCSSで画像に透かしを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。