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
Đâ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 :
|
1 2 3 4 5 |
<span style="font-family: arial, helvetica, sans-serif; font-size: 14pt;"><div class="background-overlay"> <div class="content"> <h3>GHIEN BLOGGER</h3> </div> </div></span> |
Tiếp đến mình sẽ tạo background cho thẻ <div> lớn nhất có class background-overlay :
|
1 2 3 4 5 6 |
<span style="font-family: arial, helvetica, sans-serif; font-size: 14pt;">.background-overlay { background-image: url(thêm-đường-dẫn-ảnh-của-bạn); padding: 100px 0px; box-shadow: inset 0 0 0 2000px #000000ab; /** MA THUẬT LÀ ĐÂY **/ } .content { margin: 0px auto; color: #fff; }</span> |
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é.
