Để đặt độ sáng của hình ảnh trong CSS, hãy sử dụng độ sáng của bộ lọc [%]. Nhớ là giá trị 0 làm ảnh đen, 100% là ảnh gốc và mặc định. Phần còn lại, bạn có thể đặt bất kỳ giá trị nào bạn chọn, nhưng các giá trị trên 100% sẽ làm cho hình ảnh sáng hơn
Thí dụ
Bây giờ chúng ta hãy xem một ví dụ -
Bản thử trực tiếp
Learn MySQLLearn MySQLBelow image is brighter than the original image above.
đầu ra
Hàm CSS brightness[]
áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho hình ảnh sáng hơn hoặc tối hơn. Kết quả của nó là một
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 */
1 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
div {
nền. url [ thuyền. jpg ] không lặp lại;
bộ lọc. độ sáng [40%];
phần đệm. 15% ;
}
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
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% ;
}
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
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% ;
}