Bạn có thể sử dụng một hình ảnh làm nền cho một trang. Ảnh có thể được lấy từ nơi khác trên trang web của bạn, tệp, clip art hoặc Web. Bạn cũng có thể sử dụng ảnh nền ở dạng hình mờ. Hình mờ là hiệu ứng nền hiển thị đồ họa trong bóng râm phía sau văn bản trên trang của bạn. Bạn có thể sử dụng phiên bản logo công ty đã bị xóa hoặc bạn có thể thêm văn bản đồ họa chẳng hạn như Đang xây dựng. Hình ảnh và hình mờ hiển thị trong nền có tiêu đề trên trang. Xin lưu ý rằng không phải tất cả các trình duyệt Web đều hỗ trợ hình mờ
Chèn ảnh nền
- Mở và hiển thị trang Web bạn muốn sử dụng
- Bấm chuột phải vào bất kỳ đâu trên trang mà bạn muốn chèn ảnh nền, rồi bấm Thuộc tính Trang
- Nhấp vào tab Định dạng
- Chọn hộp kiểm Ảnh nền
- Nhấp vào Duyệt
- Định vị và chọn ảnh bạn muốn chèn, rồi bấm Mở
Ảnh bạn đã chọn hiện mở dưới dạng ảnh nền
- Nhấp vào OK
Chèn hình mờ ảnh nền
- Mở và hiển thị trang Web bạn muốn sử dụng
- Bấm chuột phải vào bất kỳ đâu trên trang mà bạn muốn chèn ảnh nền, rồi bấm Thuộc tính Trang
- Nhấp vào tab Định dạng
- Chọn hộp kiểm Ảnh nền
- Chọn hộp kiểm Biến nó thành hình nền mờ
- Nhấp vào Duyệt
- Định vị và chọn ảnh bạn muốn chèn, rồi bấm Mở
Ảnh bạn đã chọn hiện mở dưới dạng ảnh nền
- Nhấp vào OK
Thư quảng cáo & ưu đãi đặc biệt của InformIT
Tôi muốn nhận các ưu đãi độc quyền và nghe về các sản phẩm từ InformIT và các thương hiệu của họ. Tôi có thể hủy đăng ký bất cứ lúc nào
Tính năng này đặc biệt hữu ích khi người dùng muốn in trang tính cùng với biểu trưng công ty, dòng giới thiệu, thông tin bản quyền hoặc bất kỳ dữ liệu nào khác được nhúng trong nền của mỗi trang hoặc một số trang để chỉ ra tính xác thực của thương hiệu hoặc chỉ đơn giản là bảo vệ nội dung của họ khỏi .
Chào mừng bạn đến với 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?
- Để thêm hình mờ vào trang HTML
- Thêm
ở cuối trangMESSAGE - Định vị nó cho phù hợp –
#watermark { position: fixed; bottom: 0; right: 0; z-index:999; }
- Thêm
- Để thêm hình mờ vào hình ảnh, chúng ta có thể sử dụng after pseudo-class
.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 xem qua một vài ví dụ nữa – Đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TRANG TRÌNH BÀY NHANH
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống 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 cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp 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 mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
TRANG WEB
Được rồi, bây giờ chúng ta hãy bắt đầu với việc tạo hình mờ cho trang web
MẬT MÃ
1 trang-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!
Càng xa càng tốt?
MẬT MÃ
2-img-hình mờ. html
/* [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;
}
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
LIÊN KẾT và THAM KHẢO
- Tạo hình mờ bằng HTML và CSS
- Nhúng hình mờ bằng CSS – Permadi. com
- sau đó /. trước – Thủ thuật CSS
- Cách Tắt Sao chép Văn bản trong Javascript & CSS – Code Boxx
- Hình mờ PHP – Code Boxx
VIDEO HƯỚNG DẪN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc