Làm thế nào để bạn phủ văn bản lên một hình ảnh trong css?

Question

HTML-CSS. Lớp phủ văn bản hình ảnh Cập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21. 50. 52 (UTC/GMT +8 giờ)

Nội dung chính Show

HTML-CSS. Bài tập-4 có lời giải
HTML-CSS. Lời khuyên trong ngày
Câu hỏi thường gặp liên quan
Giới thiệu
Tổng quan về các giải pháp khả thi
Bản đồ đường viền
Lớp phủ gradient
Giảm độ dốc
Độ dốc ngang
Trộn một màu đơn sắc và một gradient
Lớp phủ chuyển màu và đổ bóng văn bản
Lớp phủ chuyển màu, đổ bóng văn bản và độ mờ
Độ dốc xuyên tâm
Chọn màu lớp phủ có thể truy cập
thử nghiệm
Sử dụng Firefox DevTools
Làm cách nào để tạo lớp phủ trong CSS?
Làm cách nào để thêm văn bản vào hình ảnh?
CSS lớp phủ hình ảnh là gì?

HTML-CSS. Bài tập-4 có lời giải

Sử dụng HTML, CSS tạo hiển thị văn bản trên đầu hình ảnh bằng cách sử dụng lớp phủ

Sử dụng bộ lọc phông nền để áp dụng hiệu ứng mờ (14px) và độ sáng (80%). Điều này làm cho văn bản có thể đọc được bất kể hình nền và màu sắc

Mã HTML

Xem trước.

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using HTML, CSS create display a text on top of an image using an overlay</title>
</head>
<body>
<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg" height="200" width="200"></div>

</body>
</html>

Mã CSS

<style> 
 
div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 100;
  color: white;
  backdrop-filter: blur(8px) brightness(80%);
}

</style>

Trình soạn thảo HTML-CSS

Xem Bài tập html-css-thực tế trên Bút của w3resource (@w3resource) trên CodePen

Mức độ khó của bài tập này là gì?

Dễ dàng trung bình khó

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource

Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất.

HTML-CSS. Lời khuyên trong ngày

Đặt đường viền bên trong div chứ không phải trên cạnh của nó?

Đặt thuộc tính kích thước hộp thành hộp viền

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

Xu hướng hàng tuần
Bài tập lập trình Java cơ bản
Truy vấn con SQL
Bài tập cơ sở dữ liệu Adventureworks
Bài tập cơ bản C# Sharp
SQL COUNT() với sự khác biệt
Bài tập chuỗi JavaScript
Xác thực biểu mẫu HTML JavaScript
Bài tập bộ sưu tập Java
hàm SQL COUNT()
Tham gia bên trong SQL
Hàm JavaScript Bài tập
Hướng dẫn Python
Bài tập mảng Python
Tham gia chéo SQL
Bài tập về mảng Sharp trong C#

Khi tạo thư viện ảnh hoặc thứ gì đó tương tự, bạn có thể cần đặt một số văn bản chú thích hoặc mô tả lên hình ảnh. Bạn có thể sử dụng các phương pháp định vị CSS kết hợp với thuộc tính margin để định vị hoặc đặt văn bản trên một hình ảnh (i. e. phần tử



Flying Kites

Câu hỏi thường gặp liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này

Bạn có thể bắt gặp một thành phần giao diện người dùng có văn bản phía trên hình ảnh. Trong một số trường hợp, văn bản sẽ khó đọc tùy thuộc vào hình ảnh được sử dụng. Có một số giải pháp khác nhau như thêm lớp phủ chuyển màu hoặc hình nền được tô màu, đổ bóng văn bản và các giải pháp khác. Tôi được khuyến khích viết bài này sau khi xem dòng tweet này từ Addy Osmani

Trong bài viết này, tôi sẽ khám phá các cách tiếp cận và giải pháp khác nhau cho vấn đề này cũng như cách giao tiếp giao diện người dùng với nhà phát triển giao diện người dùng để đảm bảo rằng nó được triển khai theo mô hình thiết kế vì một số chi tiết có thể dễ dàng bị bỏ sót trong CSS

Giới thiệu

Mỗi giải pháp được cho là để giải quyết một vấn đề. Hãy khám phá vấn đề cho trường hợp của chúng tôi. Khi thiết kế một thành phần có văn bản phía trên hình ảnh, chúng ta nên chú ý làm cho văn bản dễ đọc

Lưu ý rằng phiên bản không có lớp phủ gradient hầu như không thể đọc được. Điều này không tốt cho người dùng. Để giải quyết vấn đề này, chúng ta cần thêm một lớp bên dưới văn bản để có thể dễ dàng đọc. Việc thêm lớp đó có thể là một thách thức và tôi đã thấy nhiều người triển khai giải pháp này mà không tính đến khả năng tiếp cận

Tổng quan về các giải pháp khả thi

Có nhiều giải pháp khác nhau để làm cho văn bản dễ đọc hơn. Hãy có cái nhìn tổng quan về chúng

Như bạn đã thấy, có nhiều giải pháp khác nhau cho vấn đề. Những cái cần chăm sóc nhiều hơn là các giải pháp gradient. Tại sao?

Bản đồ đường viền

Lớp phủ gradient

Nói chung, lớp phủ chuyển màu là giải pháp phổ biến nhất để làm cho văn bản trên hình ảnh rõ ràng hơn nhiều. Do đó, tôi sẽ tập trung hơn một chút vào nó

Khi triển khai lớp phủ gradient, chúng tôi có hai tùy chọn

Sử dụng một phần tử riêng biệt cho dải màu (phần tử giả hoặc một

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

0 trống)

Áp dụng gradient làm hình nền

Mỗi một trong những điều trên đều có ưu và nhược điểm, hãy cùng điểm qua chúng

Phần tử nội dung được định vị tuyệt đối và nó có độ dốc làm hình nền. Điều đó có nghĩa là kích thước gradient bằng với chiều cao của phần tử

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Ngay từ cái nhìn đầu tiên, bạn có thể nghĩ rằng độ dốc tốt và nó đang hoạt động. Điều này không chính xác. Tôi đã thử nghiệm cùng một độ dốc với nhiều hình ảnh hơn và đây là kết quả

Lưu ý rằng độ tương phản giữa văn bản màu trắng và hình ảnh không phải lúc nào cũng rõ ràng. Điều này có thể đọc được đối với một số người, nhưng đó là một sai lầm lớn khi sử dụng một gradient như vậy vì nó sẽ không thể truy cập được

Lý do là gradient sẽ bao phủ nhiều không gian hơn theo chiều dọc, vì vậy nó cần có chiều cao lớn hơn. Có độ dốc bằng với kích thước của nội dung sẽ không hoạt động trong mọi trường hợp. Để giải quyết vấn đề này, chúng ta có thể sử dụng

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

1 như bên dưới

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

1 đến phần tử

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

3

Flexbox để đẩy nội dung xuống dưới cùng

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Một giải pháp khác là chỉ cần sử dụng một

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

4 lớn và chúng tôi không cần

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

1 và flexbox

.card__content {
  position: absolute;
  padding-top: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

Lưu ý sự khác biệt giữa thẻ bên trái và bên phải. Độ dốc lớn hơn về chiều cao

Được rồi, điều đó có vẻ tốt. Chúng ta có thể làm tốt hơn không?

Giảm độ dốc

Nếu bạn nhìn kỹ, bạn sẽ nhận thấy rằng rõ ràng nơi kết thúc của gradient, dẫn đến một thứ gọi là cạnh cứng

Để làm điều này tốt hơn, chúng ta có thể áp dụng khái niệm nới lỏng cho gradient. Bằng cách đó, độ dốc sẽ xuất hiện tự nhiên hơn và bạn sẽ không nhận thấy một cạnh cứng ở cuối của nó

Trong CSS, chúng ta cần có nhiều điểm dừng chuyển màu để đạt được sự nới lỏng, vì không có cách riêng nào để làm điều này tại thời điểm viết bài này. Tin vui là nhóm làm việc CSS đang thảo luận về khả năng thực hiện nới lỏng trong CSS gradient, nhưng không rõ khi nào điều đó sẽ xảy ra

Rất may, ông. Andreas Larsen đã tạo một plugin PostCSS và Phác thảo tiện dụng giúp chuyển đổi một gradient bình thường thành một gradient dễ dàng

Đây là gradient CSS cho ví dụ trên

.card__content {
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
  );
}

Dưới đây là so sánh giữa thẻ nới lỏng và không nới lỏng

Độ dốc ngang

Xử lý văn bản trên hình ảnh không thể chỉ theo chiều dọc mà chúng ta còn có thể sử dụng chúng dưới dạng chuyển màu ngang. Lấy ví dụ một phần anh hùng. Nó cần một gradient ngang trong trường hợp đó

Đây là gradient CSS cho phần anh hùng ở trên. Tôi đã sử dụng công cụ được đề cập trước đây để tạo độ dốc giảm bớt

background: linear-gradient(
  to right,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.964) 7.4%,
  hsla(0, 0%, 0%, 0.918) 15.3%,
  hsla(0, 0%, 0%, 0.862) 23.4%,
  hsla(0, 0%, 0%, 0.799) 31.6%,
  hsla(0, 0%, 0%, 0.73) 39.9%,
  hsla(0, 0%, 0%, 0.655) 48.2%,
  hsla(0, 0%, 0%, 0.577) 56.2%,
  hsla(0, 0%, 0%, 0.497) 64%,
  hsla(0, 0%, 0%, 0.417) 71.3%,
  hsla(0, 0%, 0%, 0.337) 78.1%,
  hsla(0, 0%, 0%, 0.259) 84.2%,
  hsla(0, 0%, 0%, 0.186) 89.6%,
  hsla(0, 0%, 0%, 0.117) 94.1%,
  hsla(0, 0%, 0%, 0.054) 97.6%,
  hsla(0, 0%, 0%, 0) 100%
);

Trộn một màu đơn sắc và một gradient

Tôi đã biết về mô hình này từ trang web Netflix. Trên trang chủ dành cho người dùng chưa đăng nhập, có dòng tiêu đề với hình nền lớn

Tôi thích nó, nhưng nó ẩn rất nhiều chi tiết hình ảnh. Đảm bảo chỉ sử dụng điều này khi hình ảnh được dùng để trang trí (không mang lại lợi ích thực sự cho người dùng cuối)

<div class="hero">
  <img src="cover.jpg" alt="" />
  <div class="hero__content">
    <h2>Unlimited movies, TV shows, and more.</h2>
    <p>Watch anywhere. Cancel anytime.</p>
  </div>
</div>

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

Dưới đây là một lời giải thích trực quan về cách thức hoạt động của mô hình này

Lớp phủ chuyển màu và đổ bóng văn bản

Có một liên lạc nhỏ hữu ích có thể làm cho văn bản trên hình ảnh tốt hơn. Đó là tất cả về việc thêm một

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

6 tinh tế cho văn bản. Ngay cả khi điều này có thể không dễ nhận thấy, nó có thể rất hữu ích trong trường hợp hình ảnh không tải được

Xem xét ví dụ sau

.whatever-text {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

Lớp phủ chuyển màu, đổ bóng văn bản và độ mờ

Đây là mẫu mà tôi nhận thấy trên trình phát video của Facebook. Tôi thích rằng họ đã sử dụng nhiều kỹ thuật để làm cho văn bản (và các thành phần giao diện người dùng khác) rõ ràng. Khi xử lý trình phát video, điều rất quan trọng là phải đảm bảo rằng một phần tử phía trên nó phải được chú ý

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}

Điểm mới ở đây là các biểu tượng và trình phát có

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

7. Điều này sẽ giúp làm cho chúng hòa trộn với nền bên dưới chúng. Nó mang lại cảm giác rằng các điều khiển được pha trộn

Ngoài ra, sử dụng text-shadow màu trắng cho chữ trắng cũng là một cách hiệu quả để làm cho chữ rõ ràng hơn. Bạn có muốn bằng chứng rằng những điều trên sẽ hoạt động, ngay cả khi nền là một hình ảnh hoàn toàn màu trắng?

Youtube cũng đang làm điều tương tự với video của họ

Đây là những gì tôi thích về cách tiếp cận của Youtube

Sử dụng viền tối cho từng icon để nó nổi bật hơn
Sử dụng bóng đen thay vì màu trắng cho thời gian video

Độ dốc xuyên tâm

Một giải pháp thú vị mà tôi đã học được từ Netflix là sử dụng gradient xuyên tâm. Đây là cách nó làm việc

Đặt màu nền phía sau cơ sở cho anh hùng
Định vị hình ảnh ở trên cùng bên phải với 75% chiều rộng
Lớp phủ bằng với kích thước và vị trí hình ảnh

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}

Mặc dù vậy, nhóm Netflix đã sử dụng một. hình ảnh png cho lớp phủ. Tôi không chắc về lý do. Nó có thể là một vấn đề giữa nhiều trình duyệt hoặc một cái gì đó vì tôi đã không thử nghiệm nhiều giải pháp gradient xuyên tâm

Chọn màu lớp phủ có thể truy cập

Đây là một công cụ tuyệt vời giúp chúng tôi chọn độ mờ của lớp phủ phù hợp dựa trên hình ảnh. Kiểm tra nó trên Codepen. Một thách thức thú vị là xử lý khả năng truy cập cho một gradient

Nói chung, nếu bạn chắc chắn rằng lớp phủ chuyển màu lấp đầy văn bản một cách chính xác và nó có độ tương phản màu tốt, thì bạn đã sẵn sàng

thử nghiệm

Một giải pháp không thể được coi là tốt cho đến khi nó được thử nghiệm, phải không? . Nếu văn bản có thể đọc được thì gradient sẽ hoạt động với bất kỳ hình ảnh nào bạn sử dụng. Nếu không, bạn cần điều chỉnh và nâng cao nó

Đối với ví dụ trên, tôi chọn màu đồng nhất dưới tiêu đề và tỷ lệ tương phản là 4. 74, được coi là tốt

Sử dụng Firefox DevTools

Cảm ơn Gijs Veyfeyken đã cho tôi biết về việc Firefox có thể thực hiện kiểm tra độ tương phản màu trên các dải màu. Đó là một tính năng tuyệt vời

Làm cách nào để tạo lớp phủ trong CSS?

Một trong những cách tạo lớp phủ là định vị hoàn toàn phần tử HTML trên trang . Chúng tôi tạo phần tử

Làm cách nào để thêm văn bản vào hình ảnh?

Thêm văn bản vào ảnh trên Android bằng Google Photos .

Mở ảnh trong Google Photos

Ở cuối ảnh, hãy nhấn vào Chỉnh sửa (ba đường kẻ ngang)

Nhấn vào biểu tượng Đánh dấu (đường nguệch ngoạc). Bạn cũng có thể chọn màu của văn bản từ màn hình này

Nhấn vào công cụ Văn bản và nhập văn bản bạn muốn

Chọn Xong khi bạn đã hoàn tất

CSS lớp phủ hình ảnh là gì?

Lớp ảnh CSS là kỹ thuật phổ biến để chuyển đổi văn bản hoặc hình ảnh lên nhau . Ví dụ: bạn có thể kết hợp hình ảnh và văn bản trên trang web khi tạo chú thích cho hình ảnh hoặc đặt phần tử văn bản trực tiếp trên một nút. Lớp phủ hình ảnh CSS có thể là một màu đơn sắc, một dải màu, một khối màu có độ trong suốt hoặc mờ.

programming css