Bài viết này sẽ giới thiệu cho bạn khái niệm sẽ giúp bạn hiểu về độ mờ trong và cho bạn biết cách kiểm soát thông số này. Các gợi ý sau sẽ được đề cập trong bài viết này,
- Độ mờ trong CSS
- Độ mờ được thừa hưởng với các yếu tố xếp tầng
- Cài đặt thuộc tính RGBA cho các phần tử xếp tầng
- Độ mờ thay đổi trên hiệu ứng di chuột
Độ 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 với độ trong suốt), nhà thiết kế có thể kiểm soát khả năng 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ó sự xếp tầng của các phần tử, được đặt bên trên phần tử kia.
Tình huống phổ biến nhất mà 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 có thể nhìn thấy rõ ràng, vì vậy nó không chi phối văn bản phía trước.
- Hình ảnh có thể xuất hiện đầy đủ tiêu điểm khi người dùng chọn xem rõ ràng.
Bạn có thể muốn đọc trên trước khi bắt đầu tìm hiểu về độ mờ của CSS.
Để có hướng dẫn CSS toàn diện, hãy truy cập Hướng dẫn về CSS Edureka cho người mới bắt đầu . Bạn sẽ nhận được một thông báo tuyệt vời về cách CSS được sử dụng để tăng cường thiết kế web HTML.
cấu trúc dữ liệu từ điển trong java
Tiếp tục với bài viết này về Độ mờ trong CSS
Độ mờ trong CSS
Trong CSS, Opacity được đặt dưới dạng giá trị số nằm trong khoảng từ 0,0 - 1,0. Các giá trị gần bằng 0 thể hiện độ trong suốt hơn, hình ảnh sẽ rất nhẹ khi hiển thị. Hãy bắt đầu với một ví dụ về một 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 ảnh nền được đặt thành bán minh bạch
img {opacity: 0.5 filter: alpha (opacity = 50) / * Đối với IE8 trở về trước * /} 
Ví dụ 1: Đầu ra
Hình ảnh gốc (Độ mờ 100%)
Hình ảnh với cài đặt Độ mờ 50%
Trong ví dụ trên, chỉ có một phần tử - một hình ảnh. Các phần tử khác cũng có thể được đặt bằng tham số opacity như văn bản, phần tử div, v.v.
Tiếp tục với bài viết này về Độ mờ trong CSS
Độ mờ được thừa hưởng với các yếu tố xếp tầng
Khi các phần tử được xếp chồng lên nhau, nếu phần tử nền có cài đặt độ mờ thì nó sẽ được tất cả các phần tử con kế thừa. Đây là Cài đặt mặc định . Điều đó có nghĩa là nếu một hộp văn bản được đặt trên một hình ảnh và hình ảnh có cài đặt độ mờ 0,5, thì cả hình ảnh và phần tử văn bản sẽ chỉ hiển thị một phần.
Chúng ta hãy lấy ví dụ về một phần tử văn bản con được đặt trên hình ảnh TOM & JERRY trong Ví dụ tiếp theo của chúng tôi. Chúng ta có thể thấy hiệu ứng độ mờ mặc định trong Ví dụ 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: tuyệt đối trên cùng: 50% còn lại: 50% biến đổi: dịch (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYVí dụ 2: Văn bản kế thừa độ mờ 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 trong đó có thể kiểm soát độ mờ bằng các phần 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 của 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
nền: rgba (76, 175, 80, 1.0) / * Hình ảnh không có cài đặt độ mờ * / / * Nền màu xanh lá cây cho văn bản có độ mờ 100% * / / * Văn bản màu xanh lam có độ mờ 100% * /
background: rgba (76, 175, 80, 0.4) / * Hình ảnh không có cài đặt độ mờ * / / * Nền màu xanh lục cho văn bản có độ mờ 40% * / / * Vẫn nhìn thấy văn bản màu xanh lam với độ mờ 100% * /
Sau mã màu RGB, thuộc tính ‘a’ là viết tắt của alpha . Các alpha tham số là một số trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).
Tiếp tục với bài viết này về Độ mờ trong CSS
cách cài đặt php 7
Độ mờ thay đổi trên hiệu ứng di chuột
Trong một số trường hợp, 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. Ví dụ: giả sử một hình ảnh được đặt thành độ mờ 50% theo mặc định. Tuy nhiên, khi người dùng di chuột qua hình ảnh, thì chúng ta muốn hình ảnh được lấy nét hoàn toàn 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 lựa chọn thay thế cho việc sử dụng thuộc tính 'khả năng hiển thị' trong CSS. Tuy nhiên, việc sử dụng cài đặt độ mờ giúp bạn 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 kiểm tra cẩn thận trên 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 rõ nét 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 yếu 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, thuộc tính này 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 của Edureka. Đào tạo 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 và triển khai nó lên Amazon Simple Storage Service (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 câu hỏi đó trong phần bình luận của blog “Độ mờ trong CSS” này và chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.