Hướng dẫn how do you put a watermark in html? - làm thế nào để bạn đặt một hình mờ trong html?

/* (X) PREVENT HIGHLIGHTING IF YOU WANT */
main {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* (X) PREVENT HIGHLIGHTING IF YOU WANT */
main {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

và bánh sandwich bất cứ thông điệp nào bên trong. Đối với CSS:

• Chúng tôi đặt

  /* (X) PREVENT HIGHLIGHTING IF YOU WANT */
  main {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  0 thành

  /* (X) PREVENT HIGHLIGHTING IF YOU WANT */
  main {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  1 để nó sẽ ngồi ở phía dưới bên phải của trang cho dù người dùng cuộn qua trang như thế nào.
• Hiệu ứng trong suốt được đặt với

  /* (X) PREVENT HIGHLIGHTING IF YOU WANT */
  main {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  2, đây có thể là bất kỳ số nào từ 0 (vô hình) đến 1 (mờ đục).
• Cuối cùng, phần còn lại của & nbsp;

  /* (X) PREVENT HIGHLIGHTING IF YOU WANT */
  main {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  3 chỉ là mỹ phẩm.
• Thêm - Ngăn chặn văn bản nổi bật

Nếu bạn đang thêm một cảnh báo về hình mờ của người Viking để ngăn mọi người sao chép trang web của bạn, thì đây là một bước bổ sung nhỏ để thực hiện - chỉ cần vô hiệu hóa văn bản làm nổi bật với /* (X) PREVENT HIGHLIGHTING IF YOU WANT */ main { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }4. Có nhiều cách hơn để không khuyến khích sao chép, và tôi sẽ để lại một liên kết trong phần bổ sung bên dưới. WATERMARK TO IMAGE CAPTION

Hình ảnh hình ảnh

/* (X) USE THIS IF YOU WANT AN IMAGE CAPTION */
.watermark::after {
  content: "IMAGE CAPTION";
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  color: white;
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.5);
}

Càng xa càng tốt? Bây giờ chúng ta hãy áp dụng cùng một thủ thuật mờ, nhưng trên một hình ảnh bây giờ để tạo ra một hình mờ hình ảnh.

Điều này nên khá đơn giản là tốt. Về phần HTML, chúng ta chỉ cần bọc /* (X) PREVENT HIGHLIGHTING IF YOU WANT */ main { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }5 trong /* (X) PREVENT HIGHLIGHTING IF YOU WANT */ main { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }6. Đối với CSS:

Trước tiên chúng ta phải đặt container

/* (X) PREVENT HIGHLIGHTING IF YOU WANT */
main {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

7 thành

/* (X) PREVENT HIGHLIGHTING IF YOU WANT */
main {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

8 - điều này là cần thiết để định vị hình mờ đúng cách.

Hình mờ được đặt trong ____ 19 19 Đối với các bạn không biết

0 là gì - Tôi sẽ để lại một liên kết trong phần bổ sung bên dưới.

• Những gì xảy ra có phần giống như hình mờ toàn trang. Chúng tôi sử dụng
  1 để đặt hình mờ ở góc dưới bên phải của hình ảnh.
• Cuối cùng,
  2 và

  /* (X) PREVENT HIGHLIGHTING IF YOU WANT */
  main {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  2 sẽ biến nó thành hình mờ.
• Thêm - hình mờ để chú thích hình ảnh
• 2-IMG-Watermark.html
• Chuẩn rồi. Chỉ với một vài thay đổi, chúng ta có thể biến hình mờ đó thành một chú thích hình ảnh.

Không thực sự hữu ích…

Xin lưu ý rằng phương pháp HTML này sẽ không thay đổi hình ảnh gốc. Khi mọi người nhấp chuột phải> lưu hình ảnh, hình ảnh vẫn sẽ không có hình mờ. Nếu bạn thực sự được bảo vệ bản quyền, thì hãy sử dụng ứng dụng chỉnh sửa hình ảnh và nhúng hình mờ đó vĩnh viễn.

Liên kết & Tài liệu tham khảo

Tạo hình mờ bằng cách sử dụng HTML và CSS - Overflow Stack Over

Nhúng hình mờ bằng CSS - permadi.com