Hướng dẫn css ảnh đè ảnh
Trong bài viết hôm nay mình sẽ giới thiệu đến bạn những cách kết hợp chữ với hình ảnh bằng CSS và Javascript nhằm năng cao trải nghiệm người dùng khi sử dụng trang web. Nào chúng ta hãy cùng nhau đi vào tìm hiểu nhé! Trong phần này mình sẽ hướng dẫn đến bạn cách chúng ta có thể xác định được cách hiển thị nội dung trong hình ảnh thông qua thuộc
tính See the Pen Hình Ảnh Với Nội Dung by haycuoilennao19
(@haycuoilennao19) on CodePen. Nguồn Đôi khi bạn sử dụng hình ảnh với độ sáng quá cao thì sẽ làm người dùng khó thấy được nội dung trong hình ảnh. Do đó phần này chúng ta sẽ tạo một
background bằng See the Pen Sử Dụng linear-gradient cho hình ảnh by
haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Nhiều lúc bạn không muốn thay đổi màu nền cho hình ảnh bằng See the Pen Hiển thị nội dung với background cho hình ảnh by haycuoilennao19
(@haycuoilennao19) on CodePen. Nguồn Đây là một hiệu ứng thêm cho ví dụ trên giúp làm nổi bật nội dung trong hình ảnh của bạn. Để hiểu rõ hơn chúng ta hãy cùng nhau xem ví dụ sau đây nhé: See the Pen Hiển thị nội dung với background được làm mờ(blur) cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Thiết Kế Transparent Background Image CSSChúng ta sẽ kết hợp hình ảnh và background của nội dung để tạo thành một hiệu ứng gọi là Transparent. Ở đây mình có lưu ý nhỏ là See the Pen Hiển thị nội dung dưới dạng Transparent Image by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Thiết Kế Background Image Cho Chữ Bằng Background ClipChúng ta sẽ kết hợp hình ảnh và background của nội dung để tạo thành một hiệu ứng gọi là Transparent. Ở đây mình có lưu ý nhỏ
là See the Pen Hiển thị Background Hình Ảnh Cho Nội Dung Dưới Dạng Masking by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Cách Tạo Letter Trong Background ImageTrong phần này chúng ta sẽ thiết lập từng chữ sẽ hiển thị trên mỗi dòng riêng biệt nhằm mang lại cảm giác mới lạ cho người dùng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé: See the Pen Hiển thị Nội Dung Dưới Dạng Từng Chữ Trong Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Thiết Lập Modal Cho Hình ẢnhThông thường khi kích thước ảnh được sử dụng trên các màn hình điện thoại sẽ hơi khó thấy do đó phần này chúng ta sẽ đi vào tìm hiểu modal cho hình ảnh để có thể mở rộng kích thước ảnh giúp nâng cao trải nghiệm người dùng cũng như tiết kiệm diện tích trên trang web. Để dễ hiểu bạn xem ví dụ sau nhé: See the Pen Tạo Modal Cho Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen. Nguồn Bài viết liên quan:
Tổng kết:Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ hình ảnh với chữ hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ! Với cách áp dụng CSS cho thẻ image, ảnh nền bạn có thể chủ động tăng sức hút cho website của mình. Bởi vì, hình ảnh là yếu tố quan trọng giúp một trang web trở nên hấp dẫn. Đặc biệt, khi sử dụng hình ảnh một cách hiệu quả, việc quảng cáo website cũng dễ dàng hơn. Hãy cùng FUNiX tìm hiểu về cách áp dụng CSS cho hình ảnh qua nội dung bài viết dưới đây!
>> Cách áp dụng CSS cho thẻ link 1. Các thuộc tính image trong CSSĐể hình ảnh hiển thị cân đối và đẹp mắt, bạn có thể lựa chọn cách áp dụng CSS qua các thuộc tính sau:
Để thay đổi chiều cao của hình ảnh khi hiển thị trên trang web, bạn có thể sử dụng thuộc tính height trong CSS. Thuộc tính này nhận giá trị chiều cao đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, chiều cao của ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó. Ví dụ:
Chiều cao hình ảnh trong website được thay đổi bằng cách áp dụng CSS.
Muốn thiết lập độ rộng cho đường viền bao quanh ảnh, bạn sử dụng thuộc tính border trong CSS. Giá trị độ dài của thuộc tính này đo bằng px hoặc %. Khi thiết lập giá trị là 0px, hình ảnh của bạn sẽ không có đường viền bao quanh. Ví dụ:
Độ trong suốt của hình ảnh sẽ được điều chỉnh theo thuộc tính -moz-opacity.
Sử dụng thuộc tính width trong CSS để xác định độ rộng của ảnh. Thuộc tính này có thể nhận giá trị: độ rộng đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, độ rộng của hình ảnh sẽ được tính tỷ lệ với khung chứa hình ảnh đó. Ví dụ:
Sử dụng thuộc tính background-color để tạo màu nền trong CSS.
Tạo màu nền bằng cách áp dụng CSS, bạn sử dụng thuộc tính background-image. Giá trị url ở đây xác định đường dẫn đến nơi bạn lưu giữ hình ảnh. Ví dụ:
Hoc CSS co ban tai FUNiX!
Muốn thiết lập vị trí cho hình nền, bạn sử dụng thuộc tính background-position trong CSS. Đơn vị px được sử dụng để xác định giá trị cho thuộc tính. Còn nếu bạn muốn tạo hình nền ở dạng cố định hay là có thể scroll được, thì bạn sử dụng thuộc tính background-attachment trong CSS. Thuộc tính này nhận hai giá trị là scroll và fixed.
Nếu muốn hình nền được nhắc đi nhắc lại theo chiều ngang hoặc theo chiều dọc, bạn có thể dùng thuộc tính background-repeat trong CSS. Thuộc tính này có các giá trị như sau: repeat (mặc định): Hình nền được nhắc đi nhắc lại theo cả chiều dọc lẫn chiều ngang. repeat-x: Hình nền chỉ lặp đi lặp lại theo chiều ngang. repeat-y: Hình nền chỉ lặp đi lặp lại theo chiều dọc. no-repeat: Hình nền sẽ không được nhắc đi nhắc lại nữa. Trên đây là cách áp dụng CSS cho thẻ image, ảnh nền để bạn làm cho website của mình thêm phần nổi bật và có sức hút với bạn đọc hay khách hàng,… Mong rằng những chia sẻ trên đây của FUNiX sẽ hữu ích cho quá trình thiết kế web của bạn! Phạm Thị Thanh Ngọc |