Cách làm mờ hình ảnh trong CSS

Làm mờ hình ảnh khiến bạn khó nhìn hơn, nhưng đó có thể chỉ là hiệu ứng bạn đang tìm kiếm. Một hình ảnh mờ trở nên ít nổi bật hơn trên một trang web và thu hút ít sự chú ý hơn các đối tượng xung quanh nó. Ví dụ, bạn có thể làm mờ hình ảnh của một bãi biển đầy nắng để thu hút sự tập trung của người dùng vào menu bên dưới hình ảnh. Bạn không phải tạo nhiều hình ảnh để tạo hiệu ứng mờ này. Cascading Style Sheets, hoặc CSS, có thể thực hiện thủ thuật này bằng cách sử dụng một vài dòng mã.

CSS

CSS là ngôn ngữ mà các nhà thiết kế trang web sử dụng để xác định cách các đối tượng nhìn trên các trang web. Các thuộc tính này, chẳng hạn như màu sắc và độ mờ đục, có các giá trị như trong ví dụ sau: .redBorder {Border-color: red; kiểu viền: solid;}

Mã này tạo ra một lớp CSS có tên redBorder. Nếu một trong các thẻ img HTML của bạn tham chiếu lớp này, khách truy cập trang web sẽ thấy một đường viền màu đỏ bao quanh hình ảnh khi xem nó trên trang web của bạn. Mã HTML tham chiếu lớp này trông như sau và đường viền màu đỏ có thể được loại bỏ bằng cách xóa tham chiếu lớp trong thẻ img này:

Độ mờ CSS

Bằng cách thay đổi độ mờ của hình ảnh bằng CSS, bạn làm cho nó mờ hơn. Mã được hiển thị dưới đây tạo ra một lớp có tên opacity40 xác định các giá trị độ mờ là 40 phần trăm: .opacity40 {filter: alpha (opacity = 40);

độ mờ đục: 0, 4; }

Thuộc tính bộ lọc của lớp sử dụng thang độ mờ từ 0 đến 100 và thuộc tính độ mờ của nó có thang độ mờ với các giá trị từ 0 đến 1. Sử dụng cả hai thuộc tính đảm bảo rằng tất cả các trình duyệt có thể thay đổi độ mờ của hình ảnh của bạn. Thêm tham chiếu lớp này vào một hình ảnh để làm cho nó mờ. Bạn cũng có thể tạo một lớp có tên là "opacity100" và đặt các giá trị của nó sao cho độ mờ của hình ảnh là 100 phần trăm. Lớp học đó sẽ làm cho hình ảnh mờ đục.

Làm mờ chương trình

Trang web của bạn có thể hiển thị hình ảnh bị mờ khi người dùng mở trang hoặc mã của bạn có thể khiến hình ảnh bị mờ sau khi tải trang. Để làm cho hình ảnh mờ ban đầu, hãy đặt độ mờ của nó thành giá trị thấp hơn, như được mô tả trước đây. Để làm mờ hình ảnh khi ứng dụng của bạn chạy, hãy thay đổi tên của lớp xác định độ mờ của hình ảnh như trong ví dụ dưới đây: var imageObject = document.getEuityById ("image1"); imageObject.groupName = "opacity40";

Mã này, xuất hiện bên trong một hàm JavaScript, có được một tham chiếu đến hình ảnh và thay đổi tên lớp của nó thành "opacity40". Người dùng có thể nhấp vào nút chạy chức năng JavaScript hoặc mã của bạn có thể gọi nó bất cứ lúc nào.

Cân nhắc

Hàm JavaScript của bạn cần giá trị id của hình ảnh bạn muốn làm mờ nếu bạn muốn thay đổi độ mờ của nó một cách linh hoạt. Id hình ảnh trong ví dụ được mô tả trước đây là "image1." Nếu bạn có nhiều hình ảnh mờ, hãy cung cấp cho chúng các giá trị id duy nhất và chuyển chúng đến chức năng thực hiện thay đổi độ mờ. Tạo nhiều lớp CSS như bạn muốn, xác định các mức độ mờ khác nhau. Sau đó, bạn có thể làm mờ hình ảnh ở bất kỳ mức độ nào bằng cách thay đổi tham chiếu lớp của nó trong hàm JavaScript.