Ảnh đè lên ảnh trong css

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é!

Các Ví Dụ Hình Ảnh Với Chữ Trong CSS

Thiết Lập Position Text Image CSS

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 position (Thuộc tính này giúp bạn xác định ví trị của đối tượng trong trang web). Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Hình Ảnh Với Nội Dung by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Sử Dụng Linear Gradient Background Image

Đô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 linear-gradient để tăng đố tương phản giữa hình ảnh với nội dung mà không cần phải sử dụng đến photoshop. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Sử Dụng linear-gradient cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Lập Chữ Trên Hình Ảnh CSS

Nhiều lúc bạn không muốn thay đổi màu nền cho hình ảnh bằng linear-gradient thì chúng ta có thể thiết lập background cho nội dung mà vẫn gì màu sắc tươi sáng cho hình ảnh. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

See the Pen Hiển thị nội dung với background cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Blur Background Image CSS

Đâ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 CSS

Chú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à background: rgba(0, 0, 0, 0.5); , nó sẽ tạo một background màu đen và được hiển thị opacity(độ mờ) là 0.5. Bây giờ để dễ hình dung hơn chúng ta cùng nhau đi vào ví dụ nhé:

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 Clip

Chú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à background: rgba(0, 0, 0, 0.5); , nó sẽ tạo một background màu đen và được hiển thị opacity(độ mờ) là 0.5. Bây giờ để dễ hình dung hơn chúng ta cùng nhau đi vào ví dụ nhé:

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 Image

Trong 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 Ảnh

Thô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:

  • Hover Image CSS Effects Đẹp Cho Website
  • Zoom Effect CSS Javascript Cho Website
  • Gallery CSS Javascript Cho Website

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ẻ!

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:
[affegg id=8]

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Ảnh đè lên ảnh trong css

Còn bây giờ thì vào bài viết thôi!

CSS là một công cụ rất mạnh, hoạt động tốt nhất khi được giữ ở mức đơn giản nhất có thể. Thật không may, có rất nhiều ứng dụng WYSIWYG và các trình soạn thảo HTML khác tạo ra CSS đơn giản.

Một yêu cầu phổ biến là có thể hiển thị văn bản HTML trên một hình ảnh đã được nhúng trên trang. Có một số giải pháp hợp lệ sử dụng bảng hoặc CSS. Hãy cùng webaffiliatevn.com tìm hiểu !

     1. Sử dụng TABLE để phủ văn bản lên hình ảnh

Giải pháp HTML đã có từ Netscape 3 và khá đơn giản để thực hiện, nhưng không quá linh hoạt như các tùy chọn gần đây.

Ví dụ:

(Đây là đoạn văn nằm trên hình ảnh)

See the Pen abNZxVG by DavidKhai (@davidkhai) on CodePen.dark

Lưu ý:Nhiều năm trước đây là một cách tiếp cận mới lạ, nhưng ngày nay nó rất không được khuyến khích.

      2. Sử dụng CSS để phủ văn bản lên hình ảnh

Quả thực có một giải pháp đơn giản hơn, linh hoạt hơn. Thay vì dùng BẢNG, chúng tôi sử dụng thuộc tính thẻ DIV và CSS để đặt văn bản lên hình ảnh.

Ví dụ:

(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)

(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải)

See the Pen GRZqLdK by DavidKhai (@davidkhai) on CodePen.dark

Như bạn có thể thấy, chúng tôi có thể đặt bất kỳ số phần tử con nào trong div. Trong trường hợp này, một div chứa các đoạn văn bản (dưới cùng bên trái) và một đoạn văn bản (trên cùng bên phải).

Nếu không có phần tử chứa , tất cả vị trí sẽ liên quan đến khung nhìn (góc của màn hình). Điều này kết hợp với position: fixed có thể tạo ra các phần tử nằm ở một góc của màn hình và không di chuyển khi trang cuộn

     3. Tách thuộc tính style ra khỏi nội dung

Thông thường, bạn sẽ muốn có CSS ​​của mình trong một tệp riêng biệt hoặc ít nhất đó là khối kiểu riêng thay vì cùng dòng với HTML. Điều này có thể dễ dàng đạt được bằng cách thêm các class CSS cho các phần tử chứa nội dung.

Ví dụ:


(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)

(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải)

See the Pen XWdKQBE by DavidKhai (@davidkhai) on CodePen.dark

Kết quả là không đổi so với ví dụ trước, nhưng giờ đây việc duy trì dễ dàng hơn nhiều vì HTML và CSS có thể được chỉnh sửa độc lập.

     4. Hiển thị văn bản trên hình ảnh khi di chuột

Đôi khi bạn chỉ muốn văn bản xuất hiện khi di chuột lên ảnh . Một cách hay để đạt được điều này là gói hình ảnh trong một liên kết và sử dụng thuộc tính titleđể lưu trữ chú thích chúng.

Trong ví dụ dưới đây, bạn có thể thấy điều này hoạt động. Chúng tôi đã đặt liên kết ngoài thành position: absolute và sử dụng thuộc tính tiêu đề attr (tiêu đề) để tạo một số nội dung được tạo và đặt nó trên hình ảnh.

Nội dung được tạo ban đầu có độ mờ opacity: 0 và sau đó được hiển thị bằng cách sử dụng trạng thái di chuột.

Tính năng làm mờ chậm có thể vẫn không hoạt động trong một số trình duyệt vì chúng không hỗ trợ hiệu ứng chuyển tiếp trên nội dung đã tạo. Nó sẽ mờ dần trong Firefox 23.0.

Ví dụ:


Ảnh đè lên ảnh trong css

See the Pen dyMXLaL by DavidKhai (@davidkhai) on CodePen.dark