Sự khác biệt giữa độ mờ và độ trong suốt trong CSS là gì?

Bài viết này sẽ giới thiệu cho bạn khái niệm giúp bạn hiểu về độ mờ trong CSS và cho bạn biết cách kiểm soát tham số này. Các gợi ý sau đây sẽ được đề cập trong bài viết này,

Độ mờ nền của một phần tử là một cài đặt tính năng hữu ích trong thiết kế HTML. Bằng cách đặt mức độ mờ [nghịch đảo độ trong suốt], nhà thiết kế có thể kiểm soát mức độ hiển thị của phần tử thông qua thuộc tính độ mờ CSS. Điều này thường được sử dụng làm cài đặt nền khi có xếp tầng các phần tử, được đặt chồng lên nhau

Kịch bản phổ biến nhất trong đó tính năng này được sử dụng là

• Hình nền trong suốt một phần được đặt phía sau phần tử văn bản
• Hình nền mờ nên không lấn át văn bản phía trước
• Hình ảnh có thể được lấy nét hoàn toàn khi người dùng chọn xem nó một cách rõ ràng

Bạn có thể muốn đọc những điều cơ bản về CSS trước khi bắt đầu tìm hiểu về độ mờ của CSS

Để có hướng dẫn toàn diện về CSS, hãy truy cập Hướng dẫn CSS cho người mới bắt đầu của Edureka. Bạn sẽ nhận được thông tin chi tiết tuyệt vời về cách sử dụng CSS để tăng cường thiết kế web HTML

Tiếp tục với bài viết này về Độ mờ trong CSS

Độ mờ trong CSS

Trong CSS, Độ mờ được đặt thành một giá trị số nằm trong khoảng từ 0. 0 – 1. 0. Các giá trị càng gần 0 thể hiện độ trong suốt càng cao, hình ảnh sẽ rất sáng trong khả năng hiển thị. Hãy bắt đầu với một ví dụ về hình ảnh được hiển thị với độ trong suốt 50%. Xem Ví dụ 1 bên dưới

ví dụ 1. Hình nền được đặt thành nửa trong suốt

ví dụ 1. đầu ra

TOM & JERRY

ví dụ 2. Văn bản kế thừa độ mờ đục từ hình ảnh gốc

Tiếp tục với bài viết này về Độ mờ trong CSS

Cài đặt thuộc tính RGBA cho các phần tử xếp tầng

Có một cách khác để kiểm soát độ mờ bằng các yếu tố xếp tầng. Nếu bạn muốn phần tử con không bị ảnh hưởng bởi độ mờ của phần tử nền, thì bạn có thể sử dụng cài đặt thuộc tính RGBA

ví dụ 3. Sử dụng cài đặt RGBA

background: rgba[76, 175, 80, 1.0]
/*Image has no opacity setting*/
/*Green background for text with 100% opacity */
/*Blue color text has 100% opacity*/

background: rgba[76, 175, 80, 0.4]
/*Image has no opacity setting*/
/* Green background for text with 40% opacity */
/* Blue text still seen with 100% opacity*/

Sau mã màu RGB, thuộc tính 'a' là viết tắt của alpha. Tham số alpha là một số trong khoảng từ 0. 0 [hoàn toàn trong suốt] và 1. 0 [đục hoàn toàn]

Tiếp tục với bài viết này về Độ mờ trong CSS

Độ mờ thay đổi trên hiệu ứng di chuột

Trong một số trường hợp, các nhà thiết kế web muốn độ mờ thay đổi tùy thuộc vào việc người dùng có tập trung vào phần tử hay không. Chẳng hạn, giả sử một hình ảnh được đặt ở độ mờ 50% theo mặc định. Tuy nhiên, khi người dùng di chuột qua hình ảnh, thì chúng tôi muốn hình ảnh được lấy nét đầy đủ với độ mờ 100%

Ví dụ 4 cho thấy điều này được thực hiện như thế nào

Những điểm chung cần lưu ý

• Cài đặt độ mờ là một giải pháp thay thế cho việc sử dụng thuộc tính 'khả năng hiển thị' trong CSS. Tuy nhiên, sử dụng cài đặt độ mờ giúp dễ dàng đặt các mức độ trong suốt khác nhau, từ 0 đến đầy đủ
• Mức độ mờ sẽ được đặt sau khi thử nghiệm cẩn thận trong các trình duyệt khác nhau. Khi độ mờ được đặt thành giá trị thấp, đôi khi văn bản hoặc hình ảnh có thể trở nên hoàn toàn ẩn hoặc không thể đọc được
• Ý tưởng đằng sau việc sử dụng độ mờ là tập trung mạnh vào một số yếu tố trong khi các yếu tố nền khác không làm phân tán sự chú ý của người dùng. Vì vậy, các phần tử nền như vậy được đặt với độ mờ thấp hơn
• Trong Internet Explorer, đối với IE8 và các phiên bản cũ hơn, thuộc tính độ mờ là cài đặt 'bộ lọc' nằm trong khoảng từ 1 đến 100. Trong tất cả các trình duyệt khác, nó nằm trong khoảng từ 0 đến 1

Điều này đưa chúng ta đến phần cuối của bài viết này về Độ mờ trong CSS

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy xem Khóa đào tạo cấp chứng chỉ phát triển web của Edureka. Chương trình đào tạo cấp chứng chỉ phát triển web sẽ giúp bạn Tìm hiểu cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API, đồng thời triển khai trang web đó cho Dịch vụ lưu trữ đơn giản của Amazon [S3].  

Nếu bạn vẫn quan tâm Nếu bạn có bất kỳ câu hỏi nào, bạn có thể đăng nó trong phần nhận xét của blog “Độ mờ trong CSS” này và chúng tôi sẽ liên hệ lại với bạn sớm nhất có thể

Độ trong suốt và độ mờ có giống nhau trong CSS không?

Sự khác biệt giữa độ mờ và độ trong suốt là gì?

Sự khác biệt giữa việc sử dụng độ trong suốt và độ trong suốt rgba trong CSS là gì?

Sự khác biệt giữa độ mờ và alpha là gì?