Làm cách nào để làm mờ hình ảnh trong css?

brightness(amount)

amount

Độ sáng của kết quả, được chỉ định là hoặc . Giá trị dưới 100% làm tối hình ảnh, trong khi giá trị trên 100% làm sáng hình ảnh. Giá trị của 0% sẽ tạo ra một hình ảnh có màu đen hoàn toàn, trong khi giá trị của 100% giữ nguyên đầu vào. Giá trị ban đầu cho phép nội suy là

brightness(0%)   /* Completely black */
brightness(0.4)  /* 40% brightness */
brightness(1)    /* No effect */
brightness(200%) /* Double brightness */

Không còn nghi ngờ gì nữa, hình nền nâng cao sự xuất hiện của một trang web. Tuy nhiên, nếu hình ảnh được thêm vào quá sáng và có hiệu ứng nhiều màu, thì chúng có thể khiến trang trông không bắt mắt và người dùng sẽ cảm thấy khó chịu. Trong trường hợp tương tự, tùy chọn tốt nhất là làm tối các hình ảnh đã thêm

Bạn có phải tải hình ảnh và chỉnh sửa chúng trong photoshop không? . Các thuộc tính CSS khác nhau có thể phục vụ bạn cho mục đích cụ thể

Trong bài viết này, chúng tôi sẽ giải thích các phương pháp khác nhau để làm tối hình nền bằng CSS

Làm cách nào để làm tối hình nền trong CSS?

Kiểm tra các thuộc tính được liệt kê bên dưới để làm tối hình nền bằng CSS

• thuộc tính bộ lọc
• tài sản nền
• thuộc tính chế độ hòa trộn nền

Hãy khám phá từng phương pháp một

Phương pháp 1. Sử dụng thuộc tính “filter” để làm tối hình nền trong CSS

Trong CSS, thuộc tính “filter” được sử dụng để thêm các hiệu ứng đồ họa trên các phần tử HTML, đặc biệt là trên hình ảnh. Thuộc tính này cũng có thể giúp làm tối hình nền khi giá trị “độ sáng” của nó được thêm vào

Xem ví dụ đã cho để kiểm tra quy trình làm tối hình nền bằng thuộc tính bộ lọc CSS

Thí dụ

Trong ví dụ này, chúng tôi sẽ làm tối hình nền sau

Ở bước đầu tiên, chúng ta sẽ sử dụng thuộc tính “background” với giá trị “url()” để đặt hình nền; . Sau đó, “phần đệm” của “15%” sẽ được sử dụng để cung cấp không gian cụ thể cho vùng chứa của chúng tôi. Cuối cùng, sử dụng thuộc tính “bộ lọc” và đặt giá trị của nó thành “độ sáng (40%)” sẽ làm giảm ánh sáng đổ vào hình ảnh và làm cho hình ảnh tối đi

< kiểu >
div {
nền. url ( thuyền. jpg ) không lặp lại;
bộ lọc. độ sáng (40%);
phần đệm. 15% ;
}
kiểu>style>

Lưu mã đã thêm vào tệp HTML và chỉ cần mở mã đó trong trình duyệt hoặc sử dụng tiện ích mở rộng “Máy chủ trực tiếp” cho cùng một mục đích

Như bạn có thể thấy, hình nền đã được làm tối bằng cách sử dụng thuộc tính bộ lọc CSS

Phương pháp 2. Sử dụng thuộc tính “background” để làm tối hình nền trong CSS

Thuộc tính “nền” có thể được sử dụng để đặt hình nền, màu sắc, kích thước và vị trí của nó trên trang web. Nói cách khác, sử dụng thuộc tính nền, bạn có thể áp dụng gần như tất cả các thuộc tính của ảnh nền cùng một lúc

Thí dụ

Bây giờ chúng ta sẽ sử dụng thuộc tính “background” với giá trị “linear-gradient()” và đặt hai giá trị với bảng màu rgba bên trong chúng. Điều này sẽ tạo ra một bóng râm trong suốt màu xám trên hình ảnh và làm cho nó tối đi

< kiểu >
div {
nền. độ dốc tuyến tính ( rgba (0, 0, 0, 0.60) , rgba (0, 0, 0, 0.60)) , url (boats.jpg) không lặp lại;
phần đệm. 15% ;
}
kiểu>style>

đầu ra

Bây giờ, hãy tìm hiểu về thuộc tính chế độ hòa trộn nền trong phương pháp tiếp theo

Phương pháp 3. Sử dụng thuộc tính “background-blend-mode” để làm tối hình nền trong CSS

Thuộc tính “background-blend-mode” hữu ích khi màu và Hình ảnh tồn tại cùng nhau ở cùng một nơi. Thuộc tính này được sử dụng để trộn các lớp hình ảnh với màu nền. Ngoài ra, nó sẽ làm tối hình nền với một giá trị cụ thể

Thí dụ

Đầu tiên, đặt màu nền “xám” cho vùng chứa bằng thuộc tính “background-color”. Trong bước tiếp theo, hãy sử dụng giá trị “multiply” dọc theo thuộc tính “background-blend-mode”. Điều này sẽ trộn hình ảnh và trộn lớp của nó với nền

< kiểu >
div {
nền. url ( thuyền. jpg ) không lặp lại;
màu nền. xám;
chế độ hòa trộn nền. nhân;
phần đệm. 15% ;
}
kiểustyle

Ghi chú. Nếu không có màu nền đằng sau hình ảnh của bạn, thuộc tính chế độ hòa trộn nền sẽ không hoạt động. Hơn nữa, nếu màu nền không phải là màu xám hoặc hơi đen, bạn có thể không đạt được kết quả mong muốn

đầu ra

Chúng tôi đã đề cập đến ba phương pháp về cách làm tối hình nền trong CSS

Phần kết luận

Để làm tối hình nền, bạn có thể sử dụng thuộc tính “filter”, “background” hoặc “background-blend-mode”. Thuộc tính bộ lọc giảm mức độ sáng để làm tối hình nền. Thuộc tính nền cung cấp bóng trong suốt màu xám hoặc đen trên hình ảnh để làm tối hình ảnh, trong khi chế độ hòa trộn nền trộn màu nền với hình ảnh để làm cho hình ảnh tối đi. Trong blog này, ba phương pháp hiệu quả đã được sử dụng để đặt hình nền tối trong CSS