Chào mừng bạn đến với một hướng dẫn nhanh về cách thêm hình mờ trong HTML và CSS. Bạn muốn đặt một thông điệp tinh tế trên trang web của bạn? Có thể để nhắc nhở người dùng rằng tư cách thành viên của họ đã hết hạn? Hoặc có thể bạn muốn tự động thêm hình mờ vào hình ảnh?
ở dưới cùng của trang.#watermark { position: fixed; bottom: 0; right: 0; z-index:999; }
.watermark { position: relative; }
.watermark::after { position: absolute; bottom: 0; right: 0; content: "COPYRIGHT"; }
Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy đi qua một vài ví dụ nữa - đọc tiếp!
Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.
Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.
Ghi chú nhanh
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.
Hình mờ
Được rồi, bây giờ chúng ta hãy bắt đầu với việc tạo ra một hình mờ cho một trang web.
MẬT MÃ
1-page-watermark.html
/* [A] PAGE WATERMARK */
#watermark {
/* STICK AT BOTTOM RIGHT */
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
/* TRANSPARENCY */
opacity: 0.5;
/* COSMETICS */
text-align: right;
color: red;
}
MY SITE
HELLO WORLD!
Some random contents
Copyright My Site
Reminder
Your trial membership will expire in 3 days!
Giải thích
Điều này không nên là một bí ẩn quá nhiều. Về phần HTML, chúng ta chỉ cần tạo một 1-page-watermark 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 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. 2-img-watermark.html Điều này không nên là một bí ẩn quá nhiều. Về phần HTML, chúng ta chỉ cần tạo một Hình ảnh hình ảnh Trước tiên chúng ta phải đặt container Nhúng hình mờ bằng CSS - permadi.com
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./* [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]./* [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./* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Thêm - Ngăn chặn văn bản nổi bật
/* [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./* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Hình ảnh hình ảnh
MẬT MÃ
/* [A] IMAGE WATERMARK */
.watermark img { width: 100%; }
.watermark { position: relative; }
.watermark::after {
content: "COPYRIGHT, YOU SHALL NOT STEAL!";
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
font-size: 1.5em;
color: red;
}
Giải thích
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./* [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]./* [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./* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
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
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/* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* [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];
}
Đ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
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:/* [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./* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
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.
/* [A] IMAGE WATERMARK */
.watermark img { width: 100%; }
.watermark { position: relative; }
.watermark::after {
content: "COPYRIGHT, YOU SHALL NOT STEAL!";
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
font-size: 1.5em;
color: red;
}
1 để đặt hình mờ ở góc dưới bên phải của hình ảnh.
/* [A] IMAGE WATERMARK */
.watermark img { width: 100%; }
.watermark { position: relative; }
.watermark::after {
content: "COPYRIGHT, YOU SHALL NOT STEAL!";
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
font-size: 1.5em;
color: red;
}
2 và
/* [A] IMAGE WATERMARK */
.watermark img { width: 100%; }
.watermark { position: relative; }
.watermark::after {
content: "COPYRIGHT, YOU SHALL NOT STEAL!";
position: absolute;
bottom: 0;
right: 0;
opacity: 0.5;
font-size: 1.5em;
color: red;
}
2 sẽ biến nó thành hình mờ./* [X] PREVENT HIGHLIGHTING IF YOU WANT */
main {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
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.
Tạo hình mờ bằng cách sử dụng HTML và CSS - Overflow Stack Over
Làm cách nào để thêm hình mờ trong HTML?
Làm thế nào để tôi đánh dấu một hình ảnh trong HTML?
Làm cách nào để thêm hình mờ trong HTML PDF?
Chủ Đề