Nếu muốn website của mình trở nên chuyên nghiệp và nổi bật, thì chắc bạn sẽ luôn cố gắng để làm nó thật đẹp. Có rất nhiều cách để trang web của bạn thu hút hơn, và một trong những cách đơn giản nhất trong số đó chính là Overlay các hình ảnh trên website của bạn. Trong bài viết này, mình sẽ giải thích và hướng dẫn thật chi tiết cách làm cho bạn nhé.
Mục lục
Quan trọng hơn, lớp phủ màu trên hình ảnh giúp làm nổi bật đoạn text trong khi vẫn hiển thị được phần hình của ảnh nền. Bạn có thể thêm ảnh với chữ và lớp phủ màu nền (overlay) như vậy cho các bài đăng hoặc trang trên website một cách dễ dàng. Trong bài viết này, mình sẽ hướng dẫn bạn cách thực hiện nó với các bước thật đơn giản.
Bạn đang đọc: Cách tạo Overlay cho hình ảnh trong WordPress – TitanWeb
Bạn hoàn toàn có thể overlay một hình ảnh trong WordPress theo hai cách : 1 là sử dụng block Cover của Gutenberg và 2 là sử dụng CSS. Với trình soạn thảo Gutenberg, bạn hoàn toàn có thể thêm một ảnh mới trọn vẹn và thêm overlay cho bài đăng hoặc trang. Trong khi đó, nếu dùng CSS thì bạn sẽ cần ảnh có sẵn trong bài / trang rồi mới chỉnh sửa nó .Cả hai cách này đều rất dễ triển khai và mình sẽ hướng dẫn bạn lần lượt từng cách một nhé .
Đầu tiên, bạn vào phần page editor ( chỉnh sửa trang ) trong Gutenberg và triển khai theo những bước sau đây .
Click vào biểu tượng Add block và chọn loại block là Cover.
Bạn cũng có thể chọn một ảnh có sẵn trong bài / trang và chuyển nó thành ảnh bìa nếu muốn. Chỉ cần nhấp vào hình ảnh, chọn Change block style or type và chọn dạng block là Cover là được:
Để chỉnh sửa lớp overlay mặc định, mình sẽ cần vào phần thiết lập cho block .
Bạn click vào block rồi click vào biểu tượng Options (hiển thị dưới dạng nút ba chấm) và chọn Show more settings.
Phần thiết lập cho block sẽ hiển thị ở bên phải màn hình của bạn. Bạn tìm đến phần Overlay nhé.
Ở phần thiết lập này, nó cho bạn hai tùy chọn kiểu màu overlay là Solid và Gradient để overlay ảnh bìa của bạn. Chúng mình sẽ thử cả hai tùy chọn này. Trước tiên, hãy thử lớp phủ màu dạng Solid nhé.
Mình vừa chọn một màu hồng ngọt ngào cho lớp overlay phủ trên ảnh. Ngoài ra, bạn cũng có thể thay đổi độ mờ (độ trong suốt) của lớp phủ nữa đấy.
Tỷ lệ độ mờ từ 30% đến 60% là thích hợp nhất đấy. Nếu bạn đặt độ mờ thấp hơn hoặc cao hơn tỷ lệ này thì lớp màu overlay sẽ gần như không nhìn thấy được hoặc quá đậm nên sẽ che mất hình nền. Ví dụ như ở đây, mình đặt độ mờ ở mức 50%.
Như vậy là mọi thứ đã hoàn thành xong xong rồi đấy. Bạn thấy đấy, việc thêm lớp phủ màu solid vào ảnh bìa rất đơn thuần phải không ? .Bây giờ tất cả chúng ta hãy chuyển sang tùy chọn màu gradient
Màu gradient là sự trộn lẫn của tối thiểu hai loại màu với nhau. Hay nói một cách đơn thuần, màu của lớp phủ này sẽ từ từ đổi khác từ màu tiên phong sang màu thứ hai được chọn ( và cứ liên tục như vậy ) .Để dễ hiểu hơn, bạn xem cách mình tạo lớp màu phủ dạng gradient nhé .
Đầu tiên, mình chuyển thiết lập ở phần Overlay từ Solid thành Gradient. Đồng thời, mình đã chọn một bộ màu gradient trong phần gợi ý. Trông nó sẽ như thế này:
Ngoài ra, bạn cũng có thể điều chỉnh kiểu phối màu nữa. Bạn có thể chọn loại Linear hoặc Radial. Với kiểu Linear, bạn sẽ có thêm lựa chọn để đổi hướng của các dải màu.
Để sử dụng tùy chọn màu gradient sao cho hài hòa nhất, thì có lẽ rằng cũng cần một chút ít cảm quan tốt về sắc tố và cách phối màu sao cho tương thích. Nên nếu bạn không chắc, thì cứ dùng mặc định như mình cũng được nhé .
Nếu bạn dùng trình soạn thảo kiểu cũ (Classic Editor) thì bắt buộc bạn phải dùng đến CSS để thêm overlay cho ảnh. Để thêm code CSS, bạn vào Appearance > Customize > Additional CSS.
Để thêm một lớp phủ màu dạng gradient, bạn thêm đoạn code sau :
.background-gradient { position: relative; } .background-gradient::before { Nội dung: ''; background: linear-gradient(135deg,#0693e3,#9b51e0); position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: .5; }
Để thêm một lớp phủ chỉ có một màu, bạn dùng đoạn code sau :
.background-opacity { position: relative; } .background-opacity:before { Nội dung: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: .5; background-color: #000; }
Lưu ý: những đoạn code này sẽ chỉ giúp bạn thêm lớp phủ overlay thôi chứ không thêm chữ lên trên ảnh nhé.
Nếu bạn có nhiều ảnh và mỗi ảnh sử dụng một kiểu overlay thì bạn có thể thêm cả 2 đoạn code trên vào phần Additional CSS nhé. Để chỉ định chính xác ảnh nào dùng lớp phủ overlay nào, thì bạn tới phần chỉnh sửa bài viết / trang và chọn chế độ sửa là Text để xem bài viết / trang dưới dạng code. Sau đó, bạn thêm một đoạn code như sau vào mỗi ảnh để đặt tên class cho ảnh của bạn nhé:
…
…
`Ví dụ :
Như vậy là mình đã xong rồi đó!
Việc thêm overlay vào hình ảnh sẽ giúp bài viết hoặc trang của bạn có những hình ảnh ấn tượng và đẹp mắt hơn cho người đọc ngay từ cái nhìn tiên phong. Thao tác rất đơn thuần nhưng hiệu suất cao lại cao, nên không tội gì bỏ lỡ phải không những bạn !Ngoài ra, cũng có nhiều cách khác nữa để giúp website của bạn lôi cuốn và mê hoặc hơn như thể thêm những slider, banner dạng popup, video background, … nữa đấy. Bạn hoàn toàn có thể phối hợp những loại để tạo hiệu ứng tốt nhất nhé. Chúc những bạn thành công xuất sắc !
Source: https://expgg.vn
Category: Thông tin
Bảng xếp hạng Anime được xem nhiều nhất tuần của mùa hè. Bảng xếp hạng…
Theo thông báo của biên tập viên của manga là Shiraki trên Twitter Manga The…
Vừa qua, dàn nhân lực chính thức cho bộ anime điện ảnh Tensei Shitara Slime…
Anime One Punch Man đã xác nhận ra phần 3, với thông báo sắp ra…
Nếu đã quá nhàm chán với các đội hình meta hiện tại thì cùng đổi…
Vào hôm thứ tư vừa qua, Twitter chính thức cho anime Edens Zero đã xác…