Hướng dẫn nhanh này sẽ đi qua các ví dụ về cách tạo văn bản, nền, hình ảnh trong suốt trong HTML CSS. Tải xuống mã miễn phí bao gồm.

Bạn đang xem : nền trong suốt với văn bản

Chào mừng bạn đến với hướng dẫn nhanh và các ví dụ về cách tạo văn bản, nền và hình ảnh trong suốt trong HTML CSS. Ngày xửa ngày xưa trong Thời kỳ đen tối của Internet, chúng ta phải tạo ảnh GIF hoặc PNG theo cách thủ công để làm trong suốt. Ngày nay, mọi thứ rất dễ dàng với CSS hiện đại.

  1. Để tạo văn bản trong suốt, chỉ cần xác định màu bằng rgba . Ví dụ: p.ghost {color: rgba (0, 0, 0, 0.5); }
  2. Để tạo nền trong suốt, chúng tôi đặt background bằng cách sử dụng rgba . Ví dụ: div.ghost {background: rgba (0, 0, 0, 0.5); }
  3. Cuối cùng, chúng tôi có thể tạo hình ảnh trong suốt và chỉ về bất kỳ phần tử trong suốt nào bằng cách sử dụng opacity . Ví dụ: img.ghost {opacity: 0.5; }

Nội dung đó bao gồm các khái niệm cơ bản nhanh chóng, nhưng hãy đọc để biết thêm các ví dụ!

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ở đầ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

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng 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 gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những 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 khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống tất cả mã nguồn mẫu , tôi đã phát hành mã nguồn này theo giấy phép MIT, vì vậy hãy xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Xem Thêm  Cách gọi một phương thức trong Java - java gọi một phương thức

CÁC YẾU TỐ HTML RÕ RÀNG

Được rồi, bây giờ chúng ta hãy xem các ví dụ về cách tạo các phần tử trong suốt trong HTML và CSS.

1) VĂN BẢN BIỂU DIỄN

1-text.html

  & lt;! - (A) HTML - & gt;
& lt; div id = "demoA" & gt;
  & lt; img src = "image.jpg" / & gt;
  & lt; div id = "demoAT" & gt; Hello World! & lt; / div & gt;
& lt; / div & gt;
 
& lt;! - (B) CSS - & gt;
& lt; phong cách & gt;
/ * (B1) CONTAINER * /
#demoA {
  chức vụ: thân nhân;
  chiều rộng: 300px;
}
 
/ * (B2) KHỐI VĂN BẢN * /
#demoAT {
  / * VỊ TRÍ + KÍCH THƯỚC * /
  vị trí: tuyệt đối;
  đầu trang: 30px; trái: 0;
  chiều rộng: 100%;
 
  / * PHONG CÁCH VĂN BẢN * /
  font-size: 32px;
  font-weight: 700;
  text-align: center;
 
  / * VĂN BẢN VẬN CHUYỂN * /
  màu: rgba (0, 8, 255, 0.5);
}
& lt; / style & gt;  

Xin chào Thế giới!

Tạo văn bản trong suốt thật đơn giản – color: rgba (0, 8, 255, 0.5) . Đối với những người mới làm quen với hệ màu trong thế giới mạng:

  • RGB là viết tắt của các màu cơ bản – đỏ, lục, lam.
  • A là viết tắt của alpha, hoặc “minh bạch” trong thuật ngữ giáo dân.
  • Vì vậy, cách thức hoạt động của điều này rất đơn giản, chúng tôi trộn và kết hợp RGB (một số từ 0 đến 255) để có được các màu khác nhau. Khi đó, alpha là một số từ 0 (vô hình) đến 1 (mờ đục).

2) CƠ SỞ VẬN CHUYỂN

2-background.html

 & lt;! - (A) HTML - & gt;
& lt; div id = "demoB" & gt;
  & lt; img src = "image.jpg" / & gt;
  & lt; div id = "demoBT" & gt; Hello World! & lt; / div & gt;
& lt; / div & gt;

& lt;! - (B) CSS - & gt;
& lt; phong cách & gt;
/ * (B1) CONTAINER * /
#demoB {
  chức vụ: thân nhân;
  chiều rộng: 300px;
}

/ * (B2) KHỐI VĂN BẢN * /
#demoBT {
  / * VỊ TRÍ + KÍCH THƯỚC * /
  vị trí: tuyệt đối;
  đáy: 0; trái: 0;
  chiều rộng: 100%;
  đệm: 10px;
  box-sizing: border-box;

  / * PHONG CÁCH VĂN BẢN * /
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  màu: #fff;

  / * CƠ SỞ VẬN CHUYỂN * /
  nền: rgba (0, 20, 255, 0,4);
}
& lt; / style & gt;  

Xin chào Thế giới!

Đúng vậy, rgba ở đây cũng giống như vậy. Ngoại trừ việc chúng tôi xác định nó thành background để thay thế.

Xem Thêm  Hướng dẫn nhanh - cách viết json

3) HÌNH ẢNH MINH HỌA

3-back-img.html

  & lt;! - (A) HTML - & gt;
& lt; div id = "demoC" & gt;
  & lt; img id = "demoCI" src = "image.jpg" / & gt;
  & lt; div id = "demoCT" & gt; Hello World! & lt; / div & gt;
& lt; / div & gt;
 
& lt;! - (B) CSS - & gt;
& lt; phong cách & gt;
/ * (B1) CONTAINER * /
#demoC {
  chức vụ: thân nhân;
  chiều rộng: 300px;
}
#demoCI, #demoCT {vị trí: tuyệt đối; }

/ * (B2) HÌNH ẢNH NỀN TẢNG * /
#demoCI {
  chỉ số z: 1;
  độ mờ: 0,5;
}

/ * (B3) KHỐI VĂN BẢN * /
#demoCT {
  / * VỊ TRÍ + KÍCH THƯỚC * /
  chỉ số z: 2;
  đầu trang: 30px; trái: 0;
  chiều rộng: 100%;

  / * PHONG CÁCH VĂN BẢN * /
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
& lt; / style & gt;  

Xin chào Thế giới!

Cuối cùng, chúng tôi có thể sử dụng opacity để thay đổi độ trong suốt của hầu hết mọi phần tử HTML. Một số ninja mã thông minh trong các bạn có thể nghĩ rằng background-image ở đây có ý nghĩa hơn – Nhưng không. Tại thời điểm viết bài, không có cái gọi là background-opacity . Vì vậy, nó quay trở lại cách cũ của các yếu tố phân lớp để tạo hình nền trong suốt.

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn 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 & amp; TÀI LIỆU THAM KHẢO

  • Độ mờ – MDN
  • RGBA – MDN

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc, và chúng ta đã đi đến cuối cùng. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn, và nếu bạn muốn chia sẻ bất cứ điều gì về hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề nền trong suốt với văn bản

TEXT WRAP VỚI ẢNH PNG NỀN TRONG SUỐT

  • Tác giả: Viet Chi Go
  • Ngày đăng: 2020-10-21
  • Đánh giá: 4 ⭐ ( 8234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: TEXT WRAP WITH A TRANSPARENT PNG IMAGE

9,000+ Hình Nền Văn Bản Trong Suốt _Background & Banner Tải Xuống Miễn Phí

  • Tác giả: vn.pikbest.com
  • Đánh giá: 4 ⭐ ( 8507 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm kiếm Văn Bản Trong Suốt hình nền? Pikbest đã tìm thấy 9017 hình nền tuyệt vời Văn Bản Trong Suốt cho hình ảnh thương mại cá nhân có thể sử dụng được. Thêm hình ảnh nền HD Tệp miễn phí Tải xuống để thiết kế,vui lòng truy cập PIKBEST.COM
Xem Thêm  Ngắt dòng trong HTML - Cách ngắt dòng bằng thẻ HTML
- mã ngắt dòng html

Cách tạo nền trong suốt: Giải pháp trực tuyến và ngoại tuyến

  • Tác giả: www.vidmore.com
  • Đánh giá: 5 ⭐ ( 7967 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có muốn biết cách tạo nền trong suốt cho hình ảnh yêu thích của mình không? Tuyệt quá! Chúng tôi sẽ hỗ trợ bạn làm cho phông nền trong suốt trong bài đăng này bằng cách xem xét các công cụ bên dưới.

Hình ảnh 618 Văn Bản PNG Với Nền Trong Suốt

  • Tác giả: vn.lovepik.com
  • Đánh giá: 5 ⭐ ( 8563 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm kiếm và tải xuống HD hình ảnh 618 Văn Bản PNG miễn phí với nền trong suốt trực tuyến từ lovepik.com. Trong thư viện lớn 618 Văn Bản PNG, tất cả các tệp có thể được sử dụng cho mục đích thương mại.

Màu nền CSS trong suốt

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 8199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] bây giờ bạn có thể sử dụng rgba trong các thuộc tính CSS như sau: .class…

HƯỚNG DẪN TÁCH NỀN TRONG SUỐT CHO HÌNH ẢNH CON DẤU ĐƠN VỊ

  • Tác giả: nuian.vn
  • Đánh giá: 3 ⭐ ( 2589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trung tâm công nghệ Thông tin và Truyền thông Quảng Ngãi

Mẹo xóa nền hình ảnh chèn trong Word 2016, 2019, 2013, 2010, 2007

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 2032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: xoa nen hinh anh chen trong word, Khi bạn chèn hình ảnh vào văn bản chắc hẳn sẽ có lúc bạn cần xóa nền hình ảnh chèn trong Word hay tách hình ảnh ra khỏi nền

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php