CSS로 이미지에 워터마크 추가

목적:

일부 사진에 워터마크를 추가합니다.

(학습 영상 추천 : css 영상 튜토리얼)

사진 및 워터마크 표시 영역

<div class="watermark-image"></div>

Style

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!