Hướng dẫn dark overlay on image css - lớp phủ tối trên hình ảnh css

Sử dụng một 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 cho blog, trang đích hoặc danh mục đầu tư. Đó là một mẹo tôi sử dụng liên tục.

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

Một lớp phủ trên một hình ảnh không chỉ cải thiện tính thẩm mỹ mà 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 đã chế giễu. Nó không tuyệt vời, phải không?

Các văn bản ở đây có thể đọc được. Nhưng chỉ, và đó là vì tôi đã sử dụng các tiêu đề H1 và H2. Tuy nhiên, nó không thể truy cập được lắm đối với những người có tầm nhìn giảm, và nó cũng thực sự bận rộn để nhìn vào. Lớp phủ cải thiện rất nhiều 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 vài 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 ở đây. Đây là hai phương pháp tôi thấy dễ nhớ nhất. Phương pháp nào bạn chọn sẽ phụ thuộc vào mục đích của hình ảnh. Nếu bạn chỉ sau một nền tảng đẹp, bạn có thể đi về điều này 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ỉ trang trí và bạn muốn mọi người chú ý đến nó, bạn nên sử dụng thẻ hình ảnh với mô tả ALT để tiếp cận.

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 ở trong một tiêu đề; Nó có thể nằm trong một hình ảnh sang một bên hoặc là một phần của một bài viết.

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

   
   

      
Ellen Macpherson
      
Just another tech blog.
      Read more.
   

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

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

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

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tôi đã cố tình tránh một div ở đây. Nếu bạn đang tạo một tiêu đề, hãy đảm bảo rằng bạn đang sử dụng HTML ngữ nghĩa để xác định nó như vậy. Điều này sẽ giúp với cả khả năng tiếp cận và cân nhắc SEO. Để biết thêm về lý do tại sao bạn nên sử dụng các yếu tố HTML ngữ nghĩa, hãy xem bài đăng trên 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: bìa.: Allows you to set alt text for the image. Browser-friendly.

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

Và viola! Bạn đã có một nền trông đẹp hơn nhiều thu hút mắt ngay lập tức vào nút và nút gọi hành động.

Ưu điểm: Cho phép bạn đặt văn bản Alt 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.

    

        
Ellen Macpherson
        
Just another tech blog.
        Read more.
    

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

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;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

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

Ưu điểm: Sử dụng ít dòng mã hơn. Dễ thực hiện hơn.: Uses fewer lines of code. Easier to implement.

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 dự phòng hoặc màu sắc cho nền của bạn.: Issues around browser support mean you'll have to remember to set a fallback image or colour for your background.

Đó là nó! Nếu bạn có bất kỳ cách tuyệt vời nào khác để thực hiện một lớp phủ, hãy cho tôi biết trong các ý kiến. Hãy cho tôi biết độ dốc yêu thích của bạn, quá 👇

Làm thế nào để bạn tô màu lớp phủ một hình ảnh trong CSS?

Làm thế nào để bạn thêm một lớp phủ vào một hình ảnh trong CSS?

Làm thế nào để bạn làm tối một hình ảnh trong CSS?

Làm thế nào để bạn thêm một lớp phủ trong CSS?