TẠO OVERLAY CHO BACKGROUND IMAGE CHỈ VỚI 1 DÒNG CSS

Last updated on Tháng Mười Hai 25th, 2019 at 11:12 sáng

Tạo overlay cho background image chỉ bằng 1 dòng CSS, nghe cái tít hơi giật tí nhỉ 😀 Nhưng mà thật đấy, trong bài viết đầu tiên của Series hướng dẫn thiết kế web này mình sẽ hướng dẫn bạn tạo overlay cho background chỉ với 1 dòng CSS !!!

Tạo overlay cho background image chỉ bằng 1 dòng CSS
Tạo overlay cho background image chỉ bằng 1 dòng CSS

Đây là kỹ thuật tạo overlay cho background image mình vô tình lụm được thì 1 cao nhân nào đó trên Stackoverflow, và phải nói là nó cực kỳ hay !!! Thôi không dài dòng nữa, vào chủ đề chính thôi.

Để tạo được overlay thì trong bài này, mình sẽ sử dụng thuộc tính … box-shadow trong CSS nha. Rồi vậy thì ví dụ HTML chúng ta thế này ha :

Tiếp đến mình sẽ tạo background cho thẻ <div> lớn nhất có class background-overlay :

Như vậy với 1 box-shadow có độ lan rộng ( spread ) cực kỳ lớn và giá trị inset kết hợp với nhau, các giá trị còn lại đều bằng 0 hết thì bạn sẽ có 1 cái overlay đúng nghĩa, phần còn lại là màu sắc, bạn có thể tùy chính chỉnh theo ý thích nhé 😀

Tuy nhiên tạo overlay cho background chỉ là 1 trong những mục nhỏ trong NHỮNG MẸO NHỎ GIÚP WEBSITE CỦA BẠN ĐẸP HƠN thôi. Các bạn nhớ theo dõi các bài viết chia sẻ tại Cuồng Team để tự Design cho mình 1 website đẹp xịn xò nhé.

(Visited 92 times, 3 visits today)
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x