Hướng dẫn css filter: brightness not working - bộ lọc css: độ sáng không hoạt động

Question

1

Nội dung chính Show

Thông số
Đặt độ sáng bằng cách sử dụng số và tỷ lệ phần trăm
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Lọc và độ sáng
Bộ lọc độ sáng () cho điểm đánh dấu chung
Bộ lọc nền với bộ lọc phông nền
Bản tóm tắt
Tài nguyên
Làm cách nào để thay đổi độ sáng trong CSS?
Làm cách nào để thay đổi màu của hình ảnh trong CSS?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng giảm độ sáng của hình ảnh và về cơ bản làm cho nó tối hơn và tôi đang cố gắng làm điều đó với bộ lọc: độ sáng, nhưng vì một số lý do, hình ảnh không trở nên tối hơn chút nào. Tôi bắt đầu ở mức 1%, và đi đến 100%, nhưng hình ảnh không trở nên tối hơn chút nào. Tôi không biết tôi đã làm gì sai. Vui lòng xem mã của tôi:

img {
    filter: brightness(50%);
    width: 200px;
    height: 200px;
}


Có lẽ, trình duyệt của bạn không hỗ trợ thông số kỹ thuật ra khỏi hộp. Bạn nên thêm tiền tố nhà cung cấp để làm cho nó hoạt động trong trường hợp này.
-webkit-filter: brightness(50%);
có lẽ là những gì bạn đang tìm kiếm.
 Đã trả lời ngày 10 tháng 7 năm 2015 lúc 2:32Jul 10, 2015 at 2:32
 
StrikeskidsstrikeskidsStrikeskids
3,82212 huy hiệu bạc26 Huy hiệu đồng12 silver badges26 bronze badges
3
Cập nhật 10/8/2020
Có vẻ như CSS có thể dễ dàng hiểu cả tỷ lệ phần trăm và số thập phân dưới dạng phần trăm trong bộ lọc độ sáng. Có lẽ đây không phải là trường hợp 5 năm trước khi tôi đăng câu trả lời này ban đầu, nhưng bây giờ chắc chắn là trường hợp.
Nguồn/Tài liệu tại đây: https://developer.mozilla.org/en-us/docs/web/css/filter
Dưới đây là câu trả lời ban đầu từ năm 2015:
Không sử dụng tỷ lệ phần trăm trong bộ lọc. Nó phải là một thang đo từ 0 đến 1.
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
0,5 sẽ bằng 50%
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
filter: brightness(0.4);     // Does not use percentage
filter: contrast(200%);      // Uses percentage
 Đã trả lời ngày 10 tháng 7 năm 2015 lúc 2:32Jul 10, 2015 at 2:32
 
StrikeskidsstrikeskidsWes Foster
3,82212 huy hiệu bạc26 Huy hiệu đồng5 gold badges39 silver badges61 bronze badges
5
 
Hàm brightness() 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à .brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a .
Thử nó
Cú pháp
Thông số
-webkit-filter: brightness(50%);
0Độ sáng của kết quả, được chỉ định là 
-webkit-filter: brightness(50%);
1 hoặc -webkit-filter: brightness(50%);
2. Một giá trị theo -webkit-filter: brightness(50%);
3 làm tối hình ảnh, trong khi giá trị trên -webkit-filter: brightness(50%);
3 làm sáng nó. Giá trị của -webkit-filter: brightness(50%);
5 sẽ tạo ra một hình ảnh hoàn toàn màu đen, trong khi giá trị -webkit-filter: brightness(50%);
3 khiến đầu vào không thay đổi. Giá trị ban đầu cho phép nội suy là -webkit-filter: brightness(50%);
7.
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
Sự chỉ rõ
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
 
Vì vậy, có vẻ như tôi phải chú ý tốt hơn đến các tiêu chuẩn CSS vì tôi chỉ nhận ra rằng bạn có thể dễ dàng sử dụng các bộ lọc CSS để áp dụng các hiệu ứng hữu ích cho các hành vi kiểm soát chung. Chắc chắn, tôi nhớ 
-webkit-filter: brightness(50%);
8 chỉ từ những ngày IE6 cũ, xấu xa để xử lý những thứ như bóng và độ mờ, nhưng có vẻ như các thuộc tính bộ lọc đã di chuyển vào dòng chính của CSS với hai hoạt động bộ lọc được sử dụng rộng rãi và được chấp nhận có khá nhiều bộ lọc hữu ích có sẵn.
Hai thuộc tính bộ lọc là:
lọc
backdrop-filter
Có một số chức năng bộ lọc có sẵn:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Một vài trong số này rất hữu ích như các công cụ chung - đặc biệt là brightness() và 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
0.
Lọc và độ sáng
Gần đây tôi đã phát hiện ra bộ lọc brightness() mà tôi không nhận ra đã tồn tại, nhưng điều này rất, rất hữu ích cho một số hoạt động chung.
Nó rất hữu ích vì nó cho phép bạn thay đổi màu sắc của một phần tử, mà không phải chỉ định một giá trị màu cụ thể. Thay vào đó, bạn có thể thay đổi độ sáng (hoặc có lẽ cũng là màu sắc hoặc độ bão hòa nếu bạn muốn có được sự ưa thích hơn) và về cơ bản ảnh hưởng đến hành vi của anh ta của yếu tố. Điều đó làm cho nó khá hữu ích cho những thứ chung như điều khiển 'nút' hoặc yếu tố có thể đánh dấu khác.generically change the color of an element, without having to specify a specific color value. Instead you can vary the brightness (or perhaps also the hue or saturation if you want to get more fancy) and basically affect he behavior of the element. That makes it quite useful for generic things like
a 'button' control or other highlightable element.
LƯU Ý: brightness() ảnh hưởng đến cả tiền cảnh và nền phần tử khi sử dụng 
-webkit-filter: brightness(50%);
8.foreground and background when using -webkit-filter: brightness(50%);
8.
Bộ lọc độ sáng () cho điểm đánh dấu chung
Tôi không thể cho bạn biết bao nhiêu lần trong những năm tôi đã thực hiện một nút 'nút' tùy chỉnh như triển khai CSS. Trong những năm qua, tôi đã sử dụng hình ảnh, hình nền, độ dốc và độ mờ để 'làm nổi bật' điều khiển một cách hiệu quả. Tất cả những gì hoạt động tất nhiên, nhưng vấn đề với hầu hết các phương pháp này là bằng cách này hay cách khác, bạn khó mã hóa một giá trị màu, hình ảnh hoặc gradient. Điều đó có nghĩa là mọi loại nút cần cấu hình nổi bật của riêng nó và nếu bạn đang thực hiện bất kỳ loại chủ đề nào, các nút cần được ghi đè cho từng chủ đề hoạt động thông thường.
Bộ lọc brightness() cung cấp một giải pháp thay thế đơn giản hơn có khả năng bằng cách tăng cường độ sáng màu của hoặc cả màu nền và nền. Bởi vì brightness() hoạt động hết các giá trị màu cơ sở hiện có, sử dụng kiểu sửa đổi như 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
6, bạn không phải cung cấp một cách rõ ràng màu mới, mà chỉ cung cấp giá trị điều chỉnh độ sáng chung.boosting the color brightness of either or both foreground and
background colors. Because brightness() works off the existing base color values, using a modifier style like img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
6, you don't have to explicitly provide a new color, but rather just provide a generic brightness adjustment value.
Điều này có nghĩa là bạn có thể áp dụng hành vi nút cho bất kỳ nội dung nào, bất kể đó là màu gì tuyệt vời.regardless of what color it is which is great.
Ví dụ, đây là những gì tôi sử dụng để biến các biểu tượng fontawgie thành cách sử dụng hành vi giống như nút:



  
  
  

  
  
   
  
                  
  



Đây là những gì trông giống như:

 Mẫu trên Codepen
Bất kể màu nào được áp dụng cho biểu tượng - điểm nổi bật chỉ hoạt động!the highlighting just works!



Nếu bạn đã chú ý đến các tiêu chuẩn CSS thì đây có lẽ không phải là tin tức với bạn, nhưng tôi không biết rằng đây là điều bạn có thể làm. Trong thực tế, tôi đã không nhận ra rằng có rất nhiều bộ lọc hữu ích có sẵn bao gồm các bộ lọc để làm mờ, tỷ lệ xám và một vài thứ khác hữu ích cho những thứ như vô hiệu hóa các nút.
Bộ lọc nền với bộ lọc phông nền
Một điều rất hữu ích khác và một lần nữa mới đối với tôi là khả năng áp dụng 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7. Một bộ lọc phông nền cho phép bạn áp dụng bộ lọc cho nội dung mà các phần tử bị ảnh hưởng nằm trên cùng trong bố cục thành phần HTML.
Một cách hiệu quả - với một nỗ lực thêm một chút - bạn có thể áp dụng nhiều bộ lọc này vào nền chỉ rất khó thực hiện trừ khi bạn sử dụng định vị tuyệt đối và chỉ số Z!
Điều này làm cho nó dễ dàng hơn nhiều để làm nổi bật nội dung nằm trên đầu hình ảnh nền chẳng hạn.



    Icon

Mà sản xuất điều này:

 Mẫu trên Codepen
Bất kể màu nào được áp dụng cho biểu tượng - điểm nổi bật chỉ hoạt động!sits behind the filtered element. This was notoriously difficult to do otherwise, because without the 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 applying a filter or opacity to a
background element would also apply to any child content contained within a parent element.
Nếu bạn đã chú ý đến các tiêu chuẩn CSS thì đây có lẽ không phải là tin tức với bạn, nhưng tôi không biết rằng đây là điều bạn có thể làm. Trong thực tế, tôi đã không nhận ra rằng có rất nhiều bộ lọc hữu ích có sẵn bao gồm các bộ lọc để làm mờ, tỷ lệ xám và một vài thứ khác hữu ích cho những thứ như vô hiệu hóa các nút.on the background element, because 
-webkit-filter: brightness(50%);
8 also applies to all contained elements.
Bộ lọc nền với bộ lọc phông nền
.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...
Một điều rất hữu ích khác và một lần nữa mới đối với tôi là khả năng áp dụng 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7. Một bộ lọc phông nền cho phép bạn áp dụng bộ lọc cho nội dung mà các phần tử bị ảnh hưởng nằm trên cùng trong bố cục thành phần HTML.

 Mẫu trên Codepen
Bất kể màu nào được áp dụng cho biểu tượng - điểm nổi bật chỉ hoạt động!behind the top element.
Nếu bạn đã chú ý đến các tiêu chuẩn CSS thì đây có lẽ không phải là tin tức với bạn, nhưng tôi không biết rằng đây là điều bạn có thể làm. Trong thực tế, tôi đã không nhận ra rằng có rất nhiều bộ lọc hữu ích có sẵn bao gồm các bộ lọc để làm mờ, tỷ lệ xám và một vài thứ khác hữu ích cho những thứ như vô hiệu hóa các nút.
Bộ lọc nền với bộ lọc phông nền
Một điều rất hữu ích khác và một lần nữa mới đối với tôi là khả năng áp dụng 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7. Một bộ lọc phông nền cho phép bạn áp dụng bộ lọc cho nội dung mà các phần tử bị ảnh hưởng nằm trên cùng trong bố cục thành phần HTML.behind the current element. Only the area that is 'covered' by the element with the img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 gets the filter applied.
Một cách hiệu quả - với một nỗ lực thêm một chút - bạn có thể áp dụng nhiều bộ lọc này vào nền chỉ rất khó thực hiện trừ khi bạn sử dụng định vị tuyệt đối và chỉ số Z!
Điều này làm cho nó dễ dàng hơn nhiều để làm nổi bật nội dung nằm trên đầu hình ảnh nền chẳng hạn.
Mà sản xuất điều này:
Điều làm cho công việc này là img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 cho phép bạn áp dụng bộ lọc cho bất cứ thứ gì nằm phía sau phần tử được lọc. Điều này nổi tiếng là khó thực hiện khác, bởi vì không có img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 áp dụng bộ lọc hoặc độ mờ cho phần tử nền cũng sẽ áp dụng cho bất kỳ nội dung con nào có trong phần tử cha.
Lưu ý rằng sử dụng img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 khác với việc cài đặt -webkit-filter: brightness(50%);
8 trên phần tử nền, vì -webkit-filter: brightness(50%);
8 cũng áp dụng cho tất cả các phần tử chứa.
Nếu bạn làm điều này, có vẻ rất giống nhau:Editor's Draft.
Bạn nhận được kết quả không thỏa mãn này:
Sử dụng 
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 trên các phần tử cấp cao nhất thay vì filter: brightness(0.4);     // Does not use percentage
filter: contrast(200%);      // Uses percentage
4 ở phần tử dưới cùng, làm cho nó thực sự hoạt động vì nó áp dụng bộ lọc cho bất kỳ nội dung nào đằng sau phần tử trên cùng.
Bản tóm tắt
Các bộ lọc đã xuất hiện trong một thời gian dài, nhưng chúng đã có một cái tên xấu, chủ yếu là do những điều kỳ quặc đến từ việc sử dụng ban đầu với Internet Explorer. Nhưng các bộ lọc là một phần hợp pháp của tiêu chuẩn CSS bây giờ. Chúng rất hữu ích đặc biệt là đặc biệt đối với kiểu dáng chung của các yếu tố cho các hành vi di chuột năng động mà tôi đã sử dụng 
-webkit-filter: brightness(50%);
8 gần đây để giảm một loạt các quy tắc kiểu mã hóa cứng dự phòng.
img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 vẫn còn hơi quá chảy máu về mặt hỗ trợ trình duyệt được sử dụng rộng rãi, trừ khi bạn nhắm mục tiêu rõ ràng các trình duyệt hỗ trợ nó ngày hôm nay. Nhưng vì đây chủ yếu là các tính năng thẩm mỹ, bạn có thể có thể thoát khỏi việc không áp dụng các bộ lọc trong các trình duyệt không được hỗ trợ cho trải nghiệm trực quan ít hơn một chút. Tuy nhiên, img {
    filter: brightness(0.5);
    width: 200px;
    height: 200px;
}
7 rất hữu ích cho một số hiệu ứng tuyệt vời mà nếu không thì là một nỗi đau trong mông để đạt được thông qua nội dung xếp lớp và có vẻ như nó sẽ sớm có sẵn cho tất cả các trình duyệt.
Tài nguyên
Lọc ví dụ về Codepen
 
Làm cách nào để thay đổi độ sáng trong CSS?
Để đặt độ sáng hình ảnh trong CSS, hãy sử dụng độ sáng bộ lọc (%).Hãy nhớ rằng, giá trị 0 làm cho hình ảnh màu đen, 100% là cho hình ảnh gốc và mặc định.Nghỉ ngơ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.use filter brightness(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter.
Làm cách nào để thay đổi màu của hình ảnh trong CSS?
Chúng ta có thể thay đổi màu của hình ảnh PNG bằng cách sử dụng các kiểu CSS sau: Bộ lọc: Không có |Blur () |Độ sáng () |độ tương phản () |Drop-Shadow () |thang độ xám () |Hue-rotate () |Đảo ngược () |Độ mờ () |bão hòa () |SEPIA () |url () |ban đầu |thừa kế;Thuộc tính trên được sử dụng để đặt hiệu ứng trực quan của hình ảnh.filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit; The above property is used to set the visual effect of the image.

programming css CSS filter background-color CSS image Exposure CSS brightness Decrease brightness CSS

Hướng dẫn css filter: brightness not working - bộ lọc css: độ sáng không hoạt động

Thử nó

Cú pháp

Thông số

Ví dụ

Đặt độ sáng bằng cách sử dụng số và tỷ lệ phần trăm

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Lọc và độ sáng

Bộ lọc độ sáng () cho điểm đánh dấu chung

Bộ lọc nền với bộ lọc phông nền

Icon

Bộ lọc nền với bộ lọc phông nền

Bản tóm tắt

Tài nguyên

Làm cách nào để thay đổi độ sáng trong CSS?

Làm cách nào để thay đổi màu của hình ảnh trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội