Làm cách nào để làm cho hình ảnh sáng hơn trong css?

Vì vậy, có vẻ như tôi phải chú ý nhiều hơn đến các tiêu chuẩn CSS vì tôi vừa nhận ra rằng bạn có thể dễ dàng sử dụng Bộ lọc CSS để áp dụng các hiệu ứng hữu ích cho các hành vi điều khiển chung. Chắc chắn, tôi nhớ

    
Icon

4 chỉ đơn thuần là từ những ngày IE6 cũ kỹ, 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 đã chuyển sang CSS chính thống với hai thao tác bộ lọc hiện được sử dụng và chấp nhận rộng rãi có khá nhiều bộ lọc hữu ích

Hai thuộc tính bộ lọc là

• lọc
• bộ lọc phông nền

Có một số chức năng lọc có sẵn

• mơ hồ()
• độ sáng()
• trái ngược()
• bóng đổ ()
• thang độ xám()
• hue-rotate()
• đảo ngược()
• độ mờ()
• bão hòa ()
• nâu đỏ()

Một vài trong số này rất hữu ích như những công cụ chung - đặc biệt là

    
Icon

5 và

    
Icon

6

Bộ lọc và Độ sáng

Gần đây, tôi đã phát hiện ra bộ lọc

    
Icon

5 mà tôi không nhận ra là có tồn tại, nhưng bộ lọc 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 của một phần tử một cách tổng quát mà không cần 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ó thể là màu sắc hoặc độ bão hòa nếu bạn muốn trở nên lạ mắt hơn) và về cơ bản ảnh hưởng đến hành vi của phần tử. Điều đó làm cho nó khá hữu ích cho những thứ chung chung như điều khiển 'nút' hoặc phần tử có thể đánh dấu khác

Ghi chú.

    
Icon

5 ảnh hưởng đến cả phần tử tiền cảnh và hậu cảnh khi sử dụng

    
Icon

4

Bộ lọc độ sáng () để làm nổi bật chung

Tôi không thể cho bạn biết tôi đã triển khai một 'nút' tùy chỉnh như triển khai CSS bao nhiêu lần trong nhiều năm qua. Trong nhiều năm, 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 nhiên, tất cả những cách đó đều hiệu quả, nhưng vấn đề với hầu hết các cách tiếp cận này là bằng cách này hay cách khác, bạn gặp khó khăn trong việc mã hóa một giá trị màu, hình ảnh hoặc độ dốc. Điều đó có nghĩa là mọi loại nút đều 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 đè để mỗi chủ đề hoạt động bình thường

Bộ lọc

    
Icon

5 cung cấp một giải pháp thay thế tiềm năng đơn giản hơn bằng cách tăng độ sáng màu của một trong hai hoặc cả màu nền trước và màu nền sau. Vì

    
Icon

5 hoạt động dựa trên các giá trị màu cơ bản hiện có, nên sử dụng kiểu bổ trợ như

    
Icon

1, bạn không cần phải cung cấp màu mới một cách rõ ràng mà chỉ cần cung cấp giá trị điều chỉnh độ sáng chung

Điều này có nghĩa là bạn có thể áp dụng hành vi của nút cho bất kỳ nội dung nào, bất kể màu sắc của nó là gì.

Ví dụ: đây là những gì tôi sử dụng để biến các biểu tượng FontAwesome thành sử dụng hành vi giống như nút

Đây là những gì nó 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 - phần tô sáng chỉ hoạt động

Nếu bạn đã chú ý đến các tiêu chuẩn CSS thì điều này có lẽ không phải là mới đối với bạn, nhưng tôi không biết rằng đây là điều bạn có thể làm. Trên 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ờ, thang độ xám và một vài thứ khác hữu ích cho những thứ như tắt 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 một

    
Icon

2. 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 thành phần bị ảnh hưởng nằm ở trên cùng trong bố cục thành phần HTML

Thực tế - với một chút nỗ lực - bạn chỉ có thể áp dụng nhiều bộ lọc này cho nền, điều mà trước đây rất khó thực hiện trừ khi bạn sử dụng định vị tuyệt đối và chỉ mục z

Điều này giúp làm nổi bật nội dung nằm trên hình nền dễ dàng hơn nhiều chẳng hạn

    
Icon

sản xuất cái này

mẫu trên CodePen

Điều làm cho công việc này hoạt động là

    
Icon

2 cho phép bạn áp dụng bộ lọc cho bất kỳ thứ gì nằm sau phần tử được lọc. Điều này nổi tiếng là khó thực hiện, bởi vì nếu không có

    
Icon

2 áp dụng bộ lọc hoặc độ mờ cho phần tử nền thì cũng sẽ áp dụng cho bất kỳ nội dung con nào có trong phần tử gốc

Lưu ý rằng việc sử dụng

    
Icon

2 khác với cài đặt

    
Icon

4 trên phần tử nền, bởi vì

    
Icon

4 cũng áp dụng cho tất cả các phần tử được chứa

Nếu bạn làm điều này, có vẻ rất giống nhau

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

Bạn nhận được kết quả không hài lòng này

mẫu trên CodePen

Sử dụng

    
Icon

2 trên các phần tử cấp cao nhất thay vì

    
Icon

9 trên phần tử dưới cùng, làm cho điều đó thực sự hoạt động khi nó áp dụng bộ lọc cho bất kỳ nội dung nào phía sau phần tử trên cùng

Vẫn chưa thực sự dễ dàng để thực hiện các kiểu bố cục này, bởi vì bạn vẫn phải đảm bảo rằng nội dung ở trên cùng bao phủ hoàn toàn vùng chứa ở dưới cùng để đảm bảo lấp đầy. Nhưng nó vẫn dễ dàng hơn nhiều so với việc phải lộn xộn một cách rõ ràng với bố cục định vị tương đối và tuyệt đối ở giữa tài liệu của bạn

Hãy cẩn thận với bộ lọc phông nền

Để được rõ ràng.

    
Icon

2 không áp dụng cho các thuộc tính nền của phần tử bị ảnh hưởng như

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

1,

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

2, độ dốc, v.v. Thay vào đó, nó được áp dụng cho bất kỳ nội dung nào nằm sau phần tử hiện tại. Chỉ khu vực được 'bao phủ' bởi phần tử có

    
Icon

2 mới được áp dụng bộ lọc

Tôi nghĩ rằng

    
Icon

2 hữu ích như vậy, tin xấu là nó cần một trình duyệt rất mới để hoạt động. Nó yêu cầu Chromium 76 trở lên (hiện tại là 84)

Trong thường xanh hiện tại, phát hành phiên bản FireFox (79) bạn cần

• đi đến

  .image-background-text {     
     ...
     filter: blur(10px);
  }
  .text-overlay {
      /*backdrop-filter: blur(2px);*/
      ...
  

  5
• đặt

  .image-background-text {     
     ...
     filter: blur(10px);
  }
  .text-overlay {
      /*backdrop-filter: blur(2px);*/
      ...
  

  6 thành

  .image-background-text {     
     ...
     filter: blur(10px);
  }
  .text-overlay {
      /*backdrop-filter: blur(2px);*/
      ...
  

  7
• đặt

  .image-background-text {     
     ...
     filter: blur(10px);
  }
  .text-overlay {
      /*backdrop-filter: blur(2px);*/
      ...
  

  8 thành

  .image-background-text {     
     ...
     filter: blur(10px);
  }
  .text-overlay {
      /*backdrop-filter: blur(2px);*/
      ...
  

  7

thật không may. Không thể tìm thấy bất cứ điều gì về kế hoạch tích hợp mà không có cờ trong Firefox. Đối với

    
Icon

2 là Bản nháp của Biên tập viên

Kể từ hôm nay, đây là biểu đồ tương thích cho

    
Icon

2 (không phải cho

    
Icon

4 hoạt động trên mọi trình duyệt)

Nó hoạt động trong các trình duyệt Chromium hiện tại. FireFox hiện yêu cầu cờ cấu hình đặc biệt và có vẻ như iOS vẫn yêu cầu

    
Icon

43 (dường như không còn yêu cầu trong iOS 13). Vì vậy, tính năng này khá mới và chỉ được đưa vào các trình duyệt thường xanh

Tóm lược

Các bộ lọc đã xuất hiện từ lâu, nhưng chúng đã bị mang tiếng xấu, chủ yếu là do những điều kỳ quặc đến từ cách sử dụng ban đầu với Internet Explorer. Tuy nhiên, các bộ lọc hiện là một phần hợp pháp của Tiêu chuẩn CSS. Chúng hữu ích một cách đáng ngạc nhiên, đặc biệt đối với kiểu dáng chung của các phần tử cho các hành vi di chuột động mà gần đây tôi đã sử dụng

    
Icon

4 rất nhiều để giảm bớt một loạt các quy tắc kiểu được mã hóa cứng thừa

    
Icon

2 vẫn còn hơi kém về mặt hỗ trợ trình duyệt để được sử dụng rộng rãi, trừ khi bạn đang nhắm mục tiêu rõ ràng đến các trình duyệt hỗ trợ nó ngày nay. Nhưng vì đây chủ yếu là các tính năng mang tính thẩm mỹ nên bạn có thể bỏ qua việc không áp dụng các bộ lọc trong các trình duyệt không được hỗ trợ để có trải nghiệm hình ảnh kém hơn một chút. Tuy nhiên,

    
Icon

2 rất hữu ích cho một số hiệu ứng thú vị mà nếu không thì rất khó để đạt được thông qua nội dung nhiều lớp và có vẻ như nó sẽ sớm có sẵn cho tất cả các trình duyệt xanh

Tài nguyên

• Lọc ví dụ trên CodePen

bài đăng này được tạo và xuất bản với Markdown Monster Editor

Các bài viết khác có thể bạn thích

• Sử dụng CSS. escape() để thoát QuerySelectorAll()
• JavaScript JSON Phân tích cú pháp ngày và ngày thực
• Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức
• Suy nghĩ viển vông. Tại sao HTML không thể khắc phục các cuộc tấn công tập lệnh tại nguồn?

Chia sẻ

Nội dung này có hữu ích với bạn không?

Được đăng bằng CSS  HTML

Tiếng nói của lý trí

---

 

Koos
Ngày 14 tháng 9 năm 2020

lại. Sử dụng Bộ lọc CSS độ sáng () để đánh dấu chung Nội dung

Tôi thích cách sử dụng sáng tạo của bộ lọc độ sáng (). Tôi muốn chỉ ra rằng chỉ bằng cách thay đổi độ sáng, màu sắc có thể trông quá bão hòa (đối với các biến thể sáng hơn) hoặc xỉn màu (đối với các biến thể tối hơn). Những người trộn sơn biết. bạn không tạo ra sắc thái đẹp chỉ bằng cách thêm màu đen hoặc trắng

Tôi rẽ nhánh ví dụ mà tôi đã thêm bộ lọc bão hòa () cho sáng hơn và tối hơn (cho. đang hoạt động) để làm cho các màu có vẻ nhất quán hơn với các biến thể cơ bản của chúng (và tạo độ tương phản cao hơn một chút giữa các màu cơ bản và các biến thể của chúng)

Nếu bất cứ ai có kế hoạch sử dụng kỹ thuật này trong sản xuất. hãy nhớ rằng việc kiểm tra khả năng truy cập tương phản màu sắc theo cách này rất phức tạp

Rick Strahl
Ngày 14 tháng 9 năm 2020

lại. Sử dụng Bộ lọc CSS độ sáng () để đánh dấu chung Nội dung

@Koos - cảm ơn vì đã làm rõ và ví dụ, điều đó khá hữu ích

Hoàn toàn đồng ý, về độ bão hòa màu. Tôi đoán rằng sẽ cần một số thử nghiệm để làm cho nó trông phù hợp với các chủ đề và màu sắc cụ thể của bạn và. sở thích. Ví dụ: tôi nghĩ điểm nổi bật phải là màu bão hòa sâu hơn so với. hoạt động. Bất kỳ giải pháp chung nào cũng có thể gặp một số vấn đề với một số tổ hợp màu và yêu cầu một số tùy chỉnh để hoạt động trên các màu

Michael
Ngày 18 tháng 11 năm 2020

lại. Sử dụng Bộ lọc CSS độ sáng () để đánh dấu chung Nội dung

Tôi đã thấy một tính năng CSS mới được hỗ trợ trong Firefox 83 và nghĩ rằng nó có thể thú vị. Nó là một gradient hình nón

Firefox 83 bổ sung hỗ trợ cho độ dốc hình nón trong CSS, giúp màu sắc chuyển đổi mượt mà khi bạn xoay quanh tâm, thay vì khi bạn di chuyển ra ngoài từ tâm

Chúng ta có thể thay đổi màu ảnh bằng CSS không?

Chúng tôi 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. lọc. không ai. mơ hồ(). độ sáng(). trái ngược(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url(). ban đầu. thừa kế;

Bộ lọc độ sáng là gì?

Tăng hoặc giảm độ sáng đồng đều của hình ảnh theo một mức nhất định .

Làm cách nào để thay đổi màu biểu tượng hình ảnh trong CSS?

Cho một hình ảnh và nhiệm vụ là thay đổi màu của hình ảnh bằng CSS. Sử dụng chức năng lọc để thay đổi màu ảnh png . Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho chức năng lọc.

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

Làm cách nào để thay đổi màu nền trong CSS? .

yếu tố {

màu nền. tên_màu. trong suốt. ban đầu. thừa kế;