Hình ảnh bị hỏng rất xấu, nhưng chúng tôi có thể tạo kiểu cho chúng để mang lại trải nghiệm người dùng tốt hơn.
Đây là những gì chúng ta sẽ tạo ngày hôm nay:
Trước khi bắt đầu, chúng ta hãy xem xét kỹ hơn cách hoạt động của hình ảnh.
1. Chúng ta có thể áp dụng các kiểu chữ cho hình ảnh.
Chúng sẽ được áp dụng cho các phần tử thay thế.
2. Bạn có thể sử dụng các yếu tố giả trên các hình ảnh bị hỏng.
Thông thường, các phần tử ::before và ::after sẽ không hoạt động trên hình ảnh, tuy nhiên, khi hình ảnh không được tải, các phần tử này có thể xuất hiện.
Hãy đến với phần thú vị
Tạo thẻ hình ảnh và đặt url bị hỏng và thuộc tính alt.
Đây là hình ảnh trên trình duyệt
Áp dụng style cho phần tử hình ảnh.
img {
display: inline-block;
font-family: Arial, sans-serif;
font-weight: 300;
line-height: 2;
text-align: center;
min-width: 300px;
min-height: 50px;
position: relative;
}
Thêm phần tử ::before để tạo nền cho hình ảnh bị hỏng
img::before {
content: '';
width: 100%;
height: calc(100% + 10px);
background-color: #ccc;
border-radius: 10px;
position: absolute;
top: 50%;
left: -2px;
transform: translateY(-50%);
}
Đây là những gì trình duyệt hiển thị
Sau phần tử này thêm ::after để tạo văn bản và biểu tượng.
img::after {
content: "\2639" " " attr(alt);
font-size: 18px;
color: rgb(100, 100, 100);
display: block;
position: absolute;
z-index: 2;
top: 5px;
left: 0;
width: 100%;
height: 100%;
}
Output cuối cùng
Nếu link hình ảnh chính xác thì vẫn sẽ hiển thị ra bình thường
Hình ảnh hiển thị chính xác.
