Lớp phủ màu có thể là một bổ sung ấn tượng cho thư viện hình ảnh tương tác hoặc bộ tính năng cho trang web của bạn. Hướng dẫn này đề cập đến CSS đằng sau việc thêm lớp phủ vào hình ảnh Một vấn đề truyền thống mà nhiều người gặp phải là họ muốn sử dụng hình ảnh kết hợp với các liên kết hoặc các sự kiện onclick khác nhau. Tuy nhiên, không giống như các liên kết văn bản, không có hiệu ứng "di chuột" tiêu chuẩn khi nói đến hình ảnh. Điều này có thể có vấn đề từ góc độ giao diện người dùng vì cuối cùng người dùng cần dấu hiệu trực quan rằng (1) có một liên kết và (2) họ đang di chuột qua liên kết đó Tuy nhiên, đây không chỉ là về thiết kế và kinh nghiệm người dùng. Các nguyên tắc về khả năng truy cập web quy định rằng các liên kết cần phải có một số điểm khác biệt để người dùng có thể đo lường chính xác vị trí của họ trên một trang Vì vậy, câu hỏi trở thành "làm cách nào để bạn thêm hiệu ứng di chuột vào liên kết hình ảnh?" . Nó không chỉ làm cho trang web của bạn phức tạp hơn về mặt hình ảnh mà còn có thể giúp người dùng web xác định họ sắp thực hiện lựa chọn nào Hướng dẫn này hướng dẫn bạn một cách đơn giản để thêm một chút sức sống vào một trang có khả năng nhàm chán. HTMLHTML khá đơn giản với các lớp Bootstrap 4 hiện có. Đặc biệt lưu ý là div "hiệu ứng lớp phủ". Đây là một div trống về cơ bản sẽ trở thành lớp phủ hình ảnh của chúng ta Ngoài lớp "hiệu ứng lớp phủ", bạn có thể thấy các lớp "h-100" và "w-100" được sử dụng để chỉ định rằng hộp sẽ co giãn 100% theo mọi hướng CSSLớp CSS quan trọng nhất, giống như HTML, là hiệu ứng lớp phủ. Đây là nơi bạn có thể chỉ định các thuộc tính chuyển tiếp và màu lớp phủ Các lớp "di chuột" khác nhau cũng rất quan trọng vì chúng kích hoạt hiệu ứng lớp phủ bằng cách thay đổi độ mờ từ 0 thành 1 Bạn muốn xem chức năng này có thể trông như thế nào trên trang web của bạn trước khi bạn đầu tư thời gian vào viết mã? . Đừng quên điều chỉnh cửa sổ trình duyệt ở nhiều kích thước khác nhau để xem chính xác cách trang web phản hồi ở định dạng di động Lớp phủ hình ảnh là kỹ thuật thêm văn bản hoặc hình ảnh trên một hình ảnh cơ sở khác. Một trong những cách đơn giản nhất để thêm lớp phủ hình ảnh hoặc văn bản là sử dụng thuộc tính CSS và phần tử giả Nói tóm lại, hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng như sau - Các thuộc tính CSS của
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 3 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 4 để thêm hiệu ứng lớp phủ chuyển màu tuyến tính và hình ảnh - Các thuộc tính CSS
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 5, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 6, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 7, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 8, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 0 để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ - Các phần tử giả CSS
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 1 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 2 cùng với thuộc tính CSS .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 3 để kiểm soát nội dung trong trường hợp lớp phủ văn bản
Đây là một ví dụ tuyệt vời về hiệu ứng lớp phủ từ trang web Airbnb Ví dụ về lớp phủ văn bản từ AirbnbTrong ví dụ trên, hai đoạn văn bản ( .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 4 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 5) và một CTA (.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 6) đã được thêm vào trên cùng của một hình ảnh cơ sởTrong bài viết này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng lớp phủ hình ảnh tương tự Có hai loại lớp phủ - Lớp phủ hình ảnh - Thêm hình ảnh trên một hình ảnh, e. g. , hình ảnh có hình chìm mờ trong đó bạn nhìn thấy biểu trưng ở trên cùng của hình ảnh
- Lớp phủ văn bản - Thêm văn bản trên một hình ảnh, e. g. , hình ảnh anh hùng, biểu ngữ tiếp thị như ví dụ trên về Airbnb
Cụ thể hơn, chúng ta sẽ nói về hai kỹ thuật tạo lớp phủ ảnh - Lớp phủ văn bản và hình ảnh bằng CSS
Chúng tôi sẽ trình bày các ví dụ và mã về cách thêm lớp phủ văn bản và lớp phủ hình ảnh bằng CSS. Bạn có thể sử dụng các kỹ thuật này trên trang web của mình bằng cách sao chép các đoạn mã được cung cấp trong bài đăng này.
? .
? .
? .
Liên kết nhanh. → Ví dụ về lớp phủ văn bản → Ví dụ về lớp phủ hình ảnh
- (Được khuyến nghị) Lớp phủ văn bản, lớp phủ hình ảnh và hiệu ứng hình ảnh bằng ImageKit. io
Ở đây chúng ta sẽ nói về cách đơn giản hóa việc tạo lớp phủ văn bản và hình ảnh. Chúng tôi sẽ tạo hiệu ứng hình ảnh chỉ bằng cách thay đổi các tham số URL, tôi. e. , .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 7 của hình ảnh.
Điều này sẽ cho phép bạn sử dụng cùng một hình ảnh trên các ứng dụng dành cho máy tính để bàn, thiết bị di động, iOS và Android. Bạn sẽ không phải viết thêm đánh dấu hoặc mã để đạt được hiệu ứng lớp phủ trong các nền tảng khác nhau.
? .
? .
? .
Liên kết nhanh. → Lớp phủ văn bản đơn giản bằng ImageKit. io → Nhãn hình ảnh sản phẩm thương mại điện tử → Hình ảnh thủy ấn → Biểu ngữ tiếp thị động
Hiệu ứng lớp phủ văn bản bằng CSSLớp phủ văn bản sử dụng phần tử vanilla divChúng tôi sẽ thêm một văn bản trên đầu hình ảnh cơ sở sau đây .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 8hình ảnh cơ sở.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 9 được sử dụng để thay đổi kích thước hình ảnh cho ví dụ này bằng ImageKit. io
Chúng tôi sẽ thêm một văn bản trong phần tử .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 00 với lớp .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 01. Điều này hữu ích nếu văn bản động và đến từ phần phụ trợ như một phần của HTML ban đầuHTML sẽ trông giống như .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 2Chúng tôi muốn văn bản này được đặt trên đầu trang của hình ảnh. Hãy đặt .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 02 cho div với tên lớp .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 01. Và sử dụng thuộc tính CSS .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 6 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 8 để kiểm soát vị trí của văn bản lớp phủ này so với hình nền. CSS cuối cùng trông như thế này.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
}
kết quả cuối cùng Lớp phủ văn bản sử dụng phần tử giả CSSChúng ta cũng có thể sử dụng phần tử giả CSS .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 1 hoặc .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 2 thay vì tạo phần tử .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 00 mới. Điều này có nghĩa là tất cả văn bản sẽ chỉ được lưu trữ trong CSS. Giải pháp này hữu ích nếu bạn muốn phủ một bộ nhãn cố định ở nhiều vị trí trên trang webHiệu ứng lớp phủ hình ảnh bằng CSSGiống như chúng tôi đã thêm văn bản lên trên hình ảnh, chúng tôi cũng có thể thêm hình ảnh lên trên các hình ảnh khác bằng cách sử dụng các thuộc tính CSS gốc Hiệu ứng lớp phủ gradient hình ảnh Hiệu ứng lớp phủ chuyển màu là một trong những hiệu ứng lớp phủ thường được sử dụng mà bạn sẽ thấy trên các trang đích
Hãy tạo phần anh hùng của trang đích bằng hình ảnh anh hùng sau đây làm nền .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 09Hình ảnh anh hùng mẫuHTML trông giống như .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 0Chúng tôi sẽ sử dụng thuộc tính CSS .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 4 để tạo hiệu ứng lớp phủ gradient tuyến tính trên hình ảnh.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 1Điều này sẽ tạo hiệu ứng lớp phủ chuyển màu đẹp mắt mà bạn có thể sử dụng trên các trang đích của mình Nếu bạn đang tìm kiếm hiệu ứng hình ảnh tuyệt vời hơn, hãy xem hướng dẫn của chúng tôi về Hiệu ứng hình ảnh CSS để làm nổi bật hình ảnh của bạn Nhược điểm của lớp phủ hình ảnh CSS bằng CSSMặc dù tạo hiệu ứng lớp phủ hình ảnh và văn bản bằng CSS gốc khá dễ dàng, nhưng nó có một số nhược điểm - Nếu người dùng lưu hình ảnh hoặc mở nó trong một tab mới, họ sẽ không nhìn thấy văn bản hoặc hình ảnh mà bạn đã thêm bằng CSS
- Bạn sẽ phải viết thêm đánh dấu để tạo các hiệu ứng này
- Cùng một mã sẽ không hoạt động cho iOS và Android
Để khắc phục những sự cố này, bạn có thể tạo lớp phủ văn bản và hình ảnh bằng CDN hình ảnh như ImageKit. io Lớp phủ bằng ImageKit. io ImageKit. io là một CDN hình ảnh cho phép bạn thay đổi kích thước, cắt, xoay, thay đổi định dạng hình ảnh, thêm văn bản và lớp phủ hình ảnh bằng các tham số URL. Nó cũng đảm nhiệm việc tối ưu hóa hình ảnh và phân phối nội dung bằng CDN toàn cầu
Bạn sẽ cần một ImageKit. io để tạo lớp phủ văn bản và hình ảnh. Tạo một tài khoản miễn phí trên ImageKit. io nếu bạn chưa có. ImageKit. io cung cấp một gói miễn phí hào phóng cung cấp cho bạn băng thông lên tới 20 GB, hoàn toàn MIỄN PHÍ mỗi tháng Hãy đi sâu vào một số ví dụ Lớp phủ văn bản đơn giản bằng ImageKit. ioURL hình ảnh gốc. ______211 Hiện nay, - Hãy thêm một văn bản
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 12 với cỡ chữ .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 13 và màu đen .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 14. Chúng tôi sẽ sử dụng tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 15 trong URL - Với nền trắng trong suốt tôi. e.
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 16. Chúng tôi sẽ thêm tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 17 vào URL - Với phần đệm của
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 18 sử dụng tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 19
URL cuối cùng trở thành. ______330 hình ảnh kết quả Trong blog này, chúng tôi sẽ đề cập đến một vài ví dụ. Nhưng bạn có thể tìm hiểu về tất cả các tham số từ tài liệu lớp phủ văn bản Trường hợp sử dụng thương mại điện tử Bạn sẽ thường thấy các nhãn quảng cáo hoặc thông tin cụ thể trên hình ảnh sản phẩm trên một trang web thương mại điện tử như thế này Trang danh sách sản phẩm thương mại điện tử mẫuVới lớp phủ văn bản ImageKit, thật dễ dàng để tạo ra những hình ảnh như vậy Ví dụ: URL hình ảnh sản phẩm là. ______331 Bây giờ, chúng tôi muốn thêm nhãn .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 32 với nền đồng màuURL cuối cùng trở thành. ______333 Bạn có thể sử dụng URL này trong các ứng dụng dành cho thiết bị di động, máy tính để bàn, iOS và Android và kết quả sẽ giống nhau.
Hãy tìm hiểu từng phần khác nhau của URL này. .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 34 về cơ bản là thay đổi kích thước hình ảnh thành kích thước .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 35.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 36 đang thêm văn bản .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 32 vào hình ảnh.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 38 đang đặt màu của lớp phủ văn bản thành màu trắng.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 39 đang đặt màu nền thành .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 40.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 41 được sử dụng để đặt bán kính đường viền của nền thành .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 42.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 43 là để đặt phần đệm trên-dưới và trái-phải thành .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 44.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 45 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 46 được sử dụng để kiểm soát vị trí của lớp phủ văn bản so với hình nền.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 47 và .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 48 được sử dụng để kiểm soát kiểu chữ và kích thước phông chữ
hình ảnh kết quả Hình mờ Giả sử URL hình ảnh cơ sở là -
.example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 11URL biểu trưng hình ảnh lớp phủ là. ______350 Bây giờ để phủ logo này lên hình ảnh cơ sở, chúng tôi sẽ chuyển đường dẫn của hình ảnh lớp phủ trong tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 51 i. e. .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 52URL cuối cùng. ______353 Bạn cũng có thể kiểm soát vị trí, chiều rộng và các thuộc tính khác của hình ảnh lớp phủ, tất cả đều sử dụng tham số URL. Tìm hiểu thêm từ tài liệu lớp phủ hình ảnh Để kiểm soát vị trí của hình ảnh lớp phủ so với hình nền, chúng ta có thể sử dụng tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 54. Tham số .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 54 chấp nhận các giá trị vị trí tương đối i. e. .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 6, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 8, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 7, .example img {
width: 100%;
position: relative;
}
.example .overlay {
position: absolute;
top: 80px;
right: 15px;
font-weight: bold;
text-align: right;
font-size: 30px;
} 0, v.v.
Làm cách nào để phủ hình ảnh trong CSS?
Tóm lại, hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng cách sau. . các thuộc tính CSS nền-hình ảnh và nền để thêm hiệu ứng lớp phủ hình ảnh và độ dốc tuyến tính Chức vụ. thuộc tính CSS tuyệt đối, trên cùng, dưới cùng, bên phải, bên trái để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ
Làm cách nào để thêm tông màu vào CSS hình ảnh?
Chỉ cần cung cấp màu nền cho thành phần hình ảnh và khi di chuột, thay đổi độ mờ của hình ảnh để màu nền hiển thị xuyên suốt , mang lại diện mạo của một .
Làm cách nào để phủ hai hình ảnh trong CSS?
Sử dụng hai phần tử Thêm một . |