Sử dụng hình ảnh có lớp phủ tối là một trong những cách nhanh nhất để tạo tiêu đề anh hùng đẹp mắt cho blog, trang đích hoặc danh mục đầu tư. Đó là một thủ thuật tôi sử dụng liên tục

Tại sao bạn nên thêm lớp phủ vào hình ảnh của mình?

Lớp phủ trên hình ảnh không chỉ cải thiện tính thẩm mỹ mà còn làm cho văn bản dễ đọc hơn nhiều

Hãy xem xét tiêu đề anh hùng này mà tôi đã mô phỏng. Nó không phải là tuyệt vời, phải không?

Văn bản ở đây có thể đọc được. Nhưng thôi, và đó là vì tôi đã sử dụng tiêu đề H1 và H2. Tuy nhiên, nó không dễ tiếp cận đối với những người bị giảm thị lực và nó cũng thực sự bận rộn để nhìn vào. Lớp phủ cải thiện đáng kể khả năng đọc, cùng với việc làm cho thiết kế của bạn đẹp hơn nhiều. Trong bài đăng này, tôi sẽ chỉ cho bạn một số cách để mã hóa chúng

Tất nhiên, có nhiều cách bạn có thể đạt được mục tiêu cuối cùng của mình tại đây. Đây là 2 phương pháp mình thấy dễ nhớ nhất. Phương pháp bạn chọn sẽ phụ thuộc vào mục đích của hình ảnh. Nếu bạn chỉ muốn có một phông nền đẹp, bạn có thể thực hiện theo bất kỳ cách nào bạn muốn. Ngoài ra, nếu hình ảnh của bạn không chỉ mang tính trang trí và bạn muốn mọi người chú ý đến nó, thì bạn nên sử dụng thẻ hình ảnh có mô tả thay thế cho khả năng truy cập

Sử dụng thẻ hình ảnh và nền phần

Một lần nữa, đây là lựa chọn tốt nhất của bạn nếu hình ảnh của bạn không chỉ để trang trí. Điều này có thể không có trong tiêu đề;

Đầu tiên, đặt một thẻ img trong một phần

   
   

      
Ellen Macpherson
      
Just another tech blog.
      Read more.
   

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tôi đã cố tình tránh một div ở đây. Nếu bạn đang tạo tiêu đề, hãy đảm bảo rằng bạn đang sử dụng HTML ngữ nghĩa để xác định tiêu đề đó. Điều này sẽ giúp cân nhắc cả về khả năng truy cập và SEO. Để biết thêm về lý do tại sao bạn nên sử dụng các phần tử HTML ngữ nghĩa, hãy xem bài đăng blog hữu ích này

Bây giờ cho CSS. Đảm bảo hình ảnh lấp đầy tiêu đề bằng cách sử dụng chiều cao. 100%, chiều rộng. 100% hoặc bằng cách sử dụng đối tượng phù hợp. trải ra

Đặt nền thành màu mong muốn của bạn. Trong trường hợp này, tôi chỉ giữ cho nó màu đen, nhưng bạn cũng có thể sử dụng một cách thông minh gradient tuyến tính để thực sự làm cho mọi thứ nổi bật (xem phần tiếp theo để biết chi tiết). Đặt độ mờ của hình ảnh ở đâu đó giữa 0. 3 - 0. 5

header {
    height: 600px;
    width: 100vw;
    background: black;
    overflow: hidden;
}

img {
   object-fit: cover;
   opacity: 0.4;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

và violon. Bạn đã có một nền trông đẹp hơn nhiều, thu hút ánh nhìn ngay lập tức vào văn bản và nút kêu gọi hành động

ưu. Cho phép bạn đặt văn bản thay thế cho hình ảnh. Thân thiện với trình duyệt

Nhược điểm. Liên quan đến nhiều HTML và kiểu dáng hơn các phương pháp khác

Sử dụng một gradient tuyến tính

Đây là phương pháp ưa thích của tôi. Có ít kiểu dáng và suy nghĩ liên quan đến bố cục hơn. Thông thường, bạn sẽ không sử dụng những hình ảnh này cho mục đích mô tả, do đó, việc xử lý nền trong CSS có vẻ trực quan hơn

Trong trường hợp này, bạn hoàn toàn không cần tham chiếu hình ảnh trong HTML, vì vậy mã chỉ liên quan đến tiêu đề (hoặc bất kỳ thẻ nào bạn muốn tạo kiểu) và bất kỳ văn bản hoặc nút nào ở trên cùng

    

        
Ellen Macpherson
        
Just another tech blog.
        Read more.
    

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy nhớ rằng bạn không thể đặt thẻ alt nếu không có HTML, vì vậy hãy đảm bảo hình ảnh bạn đang sử dụng hoàn toàn là hình ảnh trang trí

Mặc dù độ dốc tuyến tính CSS hiện được hỗ trợ tốt, nhưng tôi sẽ sử dụng màu dự phòng cùng với tiền tố webkit để đảm bảo rằng tôi bao quát tất cả các khả năng của trình duyệt. Điều này cũng cung cấp cho bạn một dự phòng nếu vì lý do nào đó, hình nền tải chậm. Ghi nhớ chữ C trong CSS; . Do đó, màu dự phòng hoàn hảo và các kiểu có tiền tố webkit thay thế của bạn phải luôn xuất hiện trước giải pháp ít được hỗ trợ nhất. Trong trường hợp này, đó là linear-gradient()

header {
    height: 600px;
    width: 100vw;
    background: black;
    overflow: hidden;
    background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://bit.ly/2rlzaXi");
    background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://bit.ly/2rlzaXi"); /* The least supported option. */
}

img {
   object-fit: cover;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở đây chúng ta có một cách giải thích nhiều màu sắc hơn về lớp phủ

Trong ví dụ này, tôi đã sử dụng định dạng màu RGBA để làm cho dải màu trong suốt và đặt độ mờ thành 0. 8 cho một kết thúc táo bạo. Tuy nhiên, độ dốc màu sẽ không bao giờ giống nhau trên các hình ảnh khác nhau. Thử với độ mờ để đảm bảo nó hoạt động tốt với thiết kế của bạn. Để có tác động nhiều hơn, hãy đặt hình ảnh bên dưới thang độ xám và thay đổi độ tương phản của nó

ưu. Sử dụng ít dòng mã hơn. Dễ thực hiện hơn

Nhược điểm. Các vấn đề xung quanh hỗ trợ trình duyệt có nghĩa là bạn sẽ phải nhớ đặt hình ảnh hoặc màu dự phòng cho nền của mình

Đó là nó. Nếu bạn có bất kỳ cách tuyệt vời nào khác để triển khai lớp phủ, hãy cho tôi biết trong phần nhận xét. Hãy cho tôi biết độ dốc yêu thích của bạn nữa 👇