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
    MESSAGE
    ở cuối trang
  • Định vị nó cho phù hợp – #watermark { position: fixed; bottom: 0; right: 0; z-index:999; }
• Để 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 và ghi chú Hình mờ trang Hình mờ hình ảnh Bit và liên kết hữu ích Tutorial Video The End

 

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

 

MY SITE

  
HELLO WORLD!
  

  
Some random contents


 


  
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

Đó 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

Làm cách nào để đặt hình mờ trong HTML?

Thẻ HTML cho hình nền là gì?