Hướng dẫn filter invert css - bộ lọc đảo ngược css

Question

Hướng dẫn sử dụng thuộc tính

filter: hue-rotate(90deg);

2 trong

filter: hue-rotate(90deg);

3 để tùy biến giao diện

Nội dung chính Show

Examples of correct values for invert()
Specifications
Browser compatibility
Filter functions

filter: hue-rotate(90deg);

2 là thuộc tính áp dụng để làm các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho các element.

filter: hue-rotate(90deg);

2 thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền và đường viền

Để tìm hiểu nhiều hơn về

filter: hue-rotate(90deg);

2 các bạn có thể tham khảo thêm ở MDN web docs

Sau đây là một số ví dụ mẫu mà các bạn có thể thử hiệu ứng ngay

filter: drop-shadow(16px 16px 20px blue);

drop-shadow(16px 16px 20px blue)

Áp dụng

filter: hue-rotate(90deg);

filter: contrast(175%) brightness(3%);

contrast(175%) brightness(3%)

Áp dụng

contrast(175%) brightness(3%)Dark Mode.

filter: invert(1) hue-rotate(180deg);

Trong đó bạn có thể kết hợp 2 thuộc tính

filter: hue-rotate(90deg);

7 và

filter: hue-rotate(90deg);

8 để tạo hiệu ứng website của mình thành chế độ Dark Mode.

Áp dụng

contrast(175%) brightness(3%)

Trong đó bạn có thể kết hợp 2 thuộc tính

filter: hue-rotate(90deg);

7 và

filter: hue-rotate(90deg);

8 để tạo hiệu ứng website của mình thành chế độ Dark Mode.

invert(1) hue-rotate(180deg)

The

filter: contrast(175%) brightness(3%);

3 CSS function inverts the color samples in the input image. Its result is a

filter: contrast(175%) brightness(3%);

4.
filter: contrast(175%) brightness(3%);
3 CSS function inverts the color samples in the input image. Its result is a

filter: contrast(175%) brightness(3%);

4.

Try it

Syntax

Parameters

filter: contrast(175%) brightness(3%);

5

The amount of the conversion, specified as a

filter: contrast(175%) brightness(3%);

6 or a

filter: contrast(175%) brightness(3%);

7. A value of

filter: contrast(175%) brightness(3%);

8 is completely inverted, while a value of

filter: contrast(175%) brightness(3%);

9 leaves the input unchanged. Values between

filter: contrast(175%) brightness(3%);

9 and

filter: contrast(175%) brightness(3%);

8 are linear multipliers on the effect. The initial value for interpolation is

filter: invert(1) hue-rotate(180deg);

2.

Examples

Examples of correct values for invert()

invert(0)     /* No effect */
invert(.6)    /* 60% inversion */
invert(100%)  /* Completely inverted */

Specifications

Specification
Filter Effects Module Level 2 # funcdef-filter-invert # funcdef-filter-invert

Browser compatibility

BCD tables only load in the browser

Filter functions

Một số hàm có trong thuộc tính filter:

Filter	function
blur(px)	tạo hiệu ứng mờ lên hình ảnh. Giá trị truyền vào càng lớn thì ảnh càng mờ
brightness(%)	điều chỉnh độ sáng của hình ảnh
contrast(%)	điều chỉnh độ tương phản của hình ảnh
drop-shadow(h-shadow v-shadow blur spread color)	tạo đổ bóng cho hình ảnh
grayscale(%)	chuyển ảnh sang chế độ màu đen trắng
hue-rotate(deg)	Áp dụng hue rotation trên hình ảnh. Giá trị xác định số lượng xung quanh vòng tròn màu mẫu hình ảnh sẽ được điều chỉnh. 0deg là mặc định, và đại diện cho hình ảnh ban đầu.
invert(%)	đảo ngược màu ảnh
opacity(%)	thiết lập mức độ trong suốt của ảnh
saturate(%)	mức độ bão hòa màu
sepia(%)	chuyển ảnh sang chế độ màu nâu-đỏ

Chi tiết các function bạn có thể tìm hiểu tại đây

Dưới đây là một số ví dụ về CSS Filter:

Example

Hướng dẫn filter invert css - bộ lọc đảo ngược css

Một số filter cơ bản

Greyscale

.filter_grayscale {     
    -webkit-filter: grayscale(1);    
    filter: grayscale(1); 
}

2. Sepia

.filter_sepia {     
    -webkit-filter: sepia(1);     
    filter: sepia(1);
}

3. Saturate

.filter_saturate {     
    -webkit-filter: saturate(4);     
    filter: saturate(4); 
}

Chúng ta có thể kết hợp các functions này để tạo các bộ lọc "chuyên nghiệp" như Instagram, VSCO... )

)

XPRO2

.filter_xpro2 {
    -webkit-filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
    filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
}

5. NASHVILLE

.filter_nashville {
    -webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
    filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
}

6. EARLYBIRD

filter: hue-rotate(90deg);

0

7. 1977

filter: hue-rotate(90deg);

1

Ta có thể tạo rất nhiều filter từ việc kết hợp các thuộc tính của CSS Filter. Hãy thử và tạo ra những filter cho riêng mình nhé. ENJOY!

programming css Filter CSS Tailwind filter invert Backdrop-filter Invert color Photoshop Drop-shadow CSS

Hướng dẫn filter invert css - bộ lọc đảo ngược css

Try it

Syntax

Parameters

Examples

Examples of correct values for invert()

Specifications

Browser compatibility

See also

Filter functions

Example

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