Hàm
0 CSS áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho nó xuất hiện sáng hơn hoặc tối hơn. Kết quả của nó là body{
background-image:url[];
}
1. body{
background-image:url[];
}
0 CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a body{
background-image:url[];
}
1. body{
background-image:url[];
}
Thử nó
Cú pháp
Thông số
body{
background-image:url[];
}
2Độ sáng của kết quả, được chỉ định là
body{
background-image:url[];
}
3 hoặc body{
background-image:url[];
}
4. Một giá trị dưới body{
background-image:url[];
}
5 làm tối hình ảnh, trong khi giá trị trên body{
background-image:url[];
}
5 làm sáng nó. Giá trị của body{
background-image:url[];
}
7 sẽ tạo ra một hình ảnh hoàn toàn màu đen, trong khi giá trị body{
background-image:url[];
}
5 khiến đầu vào không thay đổi. Giá trị ban đầu cho phép nội suy là body{
background-image:url[];
}
9.Ví dụ
Đặt độ sáng bằng cách sử dụng số và tỷ lệ phần trăm
brightness[0%] /* Completely black */
brightness[0.4] /* 40% brightness */
brightness[1] /* No effect */
brightness[200%] /* Double brightness */
Thông số kỹ thuật
Hiệu ứng bộ lọc Module Cấp 2 # FuncDef bộ lọc sáng # funcdef-filter-brightness |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
Tôi tự hỏi nếu có thể thay đổi độ sáng của:
body{
background-image:url[];
}
Sử dụng HTML/CSS. Lý do tôi muốn thay đổi nó, là vì tôi chỉ dành một thời gian khá dài để tạo ra hình ảnh, nhưng khi tôi đưa nó lên trang web, nó đột nhiên sáng gấp đôi. Tôi đã so sánh tệp gốc và tệp được nhập vào trang web và cả hai đều có nhiều màu xanh khác nhau.
Có lý do gì cho việc này, và có cách nào tôi có thể thay đổi độ sáng không?
Thanks.
Đã hỏi ngày 26 tháng 1 năm 2014 lúc 12:25Jan 26, 2014 at 12:25
3
Bạn có thể có nhiều lớp hơn trong "nền" như thế này:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
0Điều này sẽ đặt 50% màu trắng lên hình ảnh gốc làm cho nó sáng hơn.
Chức năng cấp độ tuyến tính phải được sử dụng, nếu không nó không hoạt động. function has to be used, otherwise it doesn't work.
Ngoài ra, bạn có thể sử dụng:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
1Và điều này là tốt hơn cho khả năng duy trì mã.
Đã trả lời ngày 21 tháng 12 năm 2017 lúc 9:15Dec 21, 2017 at 9:15
1
Đây sẽ là một lựa chọn, nhưng nó không thực tế lắm và sẽ không hoạt động trong các trình duyệt cũ hơn:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
Hoặc để kiểm soát màu sắc tốt hơn, hãy thử
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
2 màu:body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla[180,0%,50%,0.25];
pointer-events: none;
}
Thực sự, tốt hơn là chơi với hình ảnh trong trình chỉnh sửa hình ảnh cho đến khi bạn nhận được kết quả trình duyệt bạn muốn.
Đã trả lời ngày 26 tháng 1 năm 2014 lúc 12:45Jan 26, 2014 at 12:45
ralph.mralph.mralph.m
12.9k3 Huy hiệu vàng23 Huy hiệu bạc29 Huy hiệu đồng3 gold badges23 silver badges29 bronze badges
1
Không có cách nào để làm điều này hoạt động trong mọi trình duyệt, nhưng nếu bạn muốn, bạn có thể làm điều đó trong các trình duyệt WebKit [Chrome, Safari, Opera], bằng cách sử dụng kiểu
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
3:img.lessBright {
-webkit-filter: brightness[0.8];
filter: brightness[0.8];
}
Điều đó dẫn đến độ sáng được giảm xuống 80% trong các trình duyệt WebKit. Tôi khuyên bạn chỉ nên lưu một phiên bản khác của hình ảnh của bạn nếu bạn muốn làm điều này mặc dù.
Đã trả lời ngày 26 tháng 1 năm 2014 lúc 12:40Jan 26, 2014 at 12:40
Joeytje50Joeytje50Joeytje50
18.3K14 Huy hiệu vàng60 Huy hiệu bạc93 Huy hiệu Đồng14 gold badges60 silver badges93 bronze badges
2
- Tạo một div trẻ em cho hình ảnh nền của cùng kích thước.
- Đặt màu nền của con với RGBA, bao gồm kênh alpha [độ mờ].
- Đặt độ mờ phù hợp trong khoảng từ 0 đến 1. 1 = mờ, 0 = trong suốt, 0,5 = mờ
HTML:
CSS:
#primary_feature{
background-image: url["../assets/images/misc/laptop.png"];
}
.feature{
background:rgba[0,0,0,0.6];
}
Đã trả lời ngày 9 tháng 7 năm 2020 lúc 12:21Jul 9, 2020 at 12:21
Sam_Sam_Sam_
865 huy hiệu đồng5 bronze badges
Một bản cập nhật cho câu trả lời khác.
Bạn cũng có thể sử dụng bộ lọc phông nền để có hiệu quả tốt hơn nhiều. Nó có thể sử dụng bất kỳ
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
3, trong trường hợp này là body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba[0,0,0,0.1];
pointer-events: none;
}
5.Điều này có nghĩa là nền của bạn sẽ không được rửa sạch với màu trên đầu, thay vào đó nó sẽ ảnh hưởng trực tiếp đến nền cho một cái nhìn tự nhiên hơn trong khi vẫn giữ được tất cả các chi tiết.
Nhược điểm, hiện tại nó không được hỗ trợ trong Firefox, trừ khi các cài đặt thử nghiệm được bật. Nhưng điều đó sẽ sớm thay đổi và khi viết điều này, Firefox chỉ là 6,5% thị trường.
Tuy nhiên, nó được hỗ trợ đầy đủ trong Chrome
body {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: brightness[120%];
pointer-events: none;
}
Đã trả lời ngày 24 tháng 9 năm 2019 lúc 1:02Sep 24, 2019 at 1:02
ElectronelectronElectron
8391 Huy hiệu vàng8 Huy hiệu bạc21 Huy hiệu đồng1 gold badge8 silver badges21 bronze badges
Tôi đặt một tấm bạt màu đen lên hình ảnh và thay đổi độ sáng:
c = document.getElementById["myCanvas"];
ctx = c.getContext["2d"];
ctx.beginPath[];
ctx.rect[0,0,c.width,c.height]; //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill[];
skara9
3.7911 Huy hiệu vàng5 Huy hiệu bạc20 Huy hiệu đồng 201 gold badge5 silver badges20 bronze badges
Đã trả lời ngày 28 tháng 11 năm 2021 lúc 2:13Nov 28, 2021 at 2:13
DaverdaverDaveR
12 huy hiệu đồng2 bronze badges
Tôi đã có cùng một vấn đề, nhưng đó là với một GIF.
Cách giải quyết của tôi:
Tôi đã tạo ra một hình ảnh hình vuông màu đen rất nhỏ trong PowerPoint và đặt độ trong suốt của nó thành 50% và lưu nó dưới dạng một tệp có tên là "DimMerswitch.png"
Hơn tôi đã tham khảo rằng cái đầu tiên trong mã:
body {
background-image:url["dimmerswitch.png"], url["YourImage.png"];
}
Đã trả lời ngày 24 tháng 2 năm 2017 lúc 6:06Feb 24, 2017 at 6:06
Bạn chỉ cần thực hiện Photoshop để giảm độ sáng nếu không có cách nào khác.
Đã trả lời ngày 18 tháng 6 năm 2016 lúc 11:33Jun 18, 2016 at 11:33
1