Cách thay đổi màu ảnh PNG bằng CSS – css thay đổi màu sắc hình ảnh

Tìm hiểu cách bạn có thể thay đổi màu của hình ảnh PNG bằng các giá trị thuộc tính CSS của bộ lọc. Xem một số ví dụ và tạo mã của riêng bạn!

Bạn đang xem : css thay đổi màu hình ảnh

Trong hướng dẫn này, chúng tôi sẽ thay đổi màu hình ảnh PNG với sự trợ giúp của CSS .

Cách dễ nhất để thay đổi màu sắc của hình ảnh png là sử dụng thuộc tính filter , thuộc tính này áp dụng hiệu ứng hình ảnh cho phần tử (hình ảnh). Nó có các giá trị sau:

  

bộ lọc

: none |

mờ

() |

độ sáng

() |

tương phản

() |

đổ bóng

() |

thang độ xám

() |

hue-xoay

() |

invert

() |

độ mờ

() |

bão hòa

() |

nâu đỏ

() |

url

() | ban đầu | inherit;

Với các giá trị này, chúng ta có thể thay đổi màu sắc của hình ảnh.

Bộ lọc mới đối với trình duyệt và chỉ được hỗ trợ trong các trình duyệt hiện đại. Bạn có thể sử dụng -webkit-filter cho Safari, Google Chrome và Opera.

Hãy thay đổi màu hình ảnh từng bước.

Tạo HTML

  • Sao chép và dán liên kết hình ảnh của bạn vào phần & lt; body & gt; . Chúng tôi sử dụng hai hình ảnh với các lớp là “image-1” và “image-2”.
  

& lt;

body

& gt;

& lt;

img

class

=

" image-1 "

src

=

" https://images.unsplash.com/photo -1480044965905-02098d419e96? Ixlib = rb-1.2.1

& amp; amp;

ixid = eyJhcHBfaWQiOjEyMDd9

& amp; amp; auto = format

& amp; amp;

fit = crop

& amp; amp;

w = 1000

& amp; amp;

q = 80 "

width

=

" 500px "

height

=

" 250px "

alt < / p> =

"bộ lọc được áp dụng"

/ & gt;

& lt;

img

class

=

" image-2 "

src

=

" https://images.unsplash.com/photo -1448227922836-6d05b3f8b663? Ixlib = rb-1.2.1

& amp; amp;

ixid = eyJhcHBfaWQiOjEyMDd9

& amp; amp; auto = format

& amp; amp;

fit = crop

& amp; amp;

w = 1000

& amp; amp;

q = 80 "

width

=

" 500px "

height

=

" 250px "

alt < / p> =

"bộ lọc được áp dụng"

/ & gt;

& lt; /

body

& gt;

Thêm CSS

Bây giờ, chúng tôi thêm kiểu vào các lớp “image-1” và “image-2”.

  • Sử dụng thuộc tính width để đặt chiều rộng của cả hai hình ảnh.
  • Đặt thuộc tính

    filter

    với giá trị “invert” của nó trên lớp “image-1”. Chúng tôi đặt 100% để làm cho hình ảnh bị đảo ngược hoàn toàn.

  • Sử dụng thuộc tính

    filter

    với giá trị “nâu đỏ” (100%) trên lớp “image-2”.

  

img

{

width

:

40%

;

float

: left; }

. image-1

{

filter

:

invert

(

100%

); -webkit-

bộ lọc

:

invert

(

100% ); }

. image-2

{

filter

:

sepia

(

100%

); -webkit-

bộ lọc

:

nâu đỏ

(

100% ); }

Vì vậy, hãy xem kết quả của mã của chúng ta.

Ví dụ về cách thay đổi màu ảnh PNG:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Chuyển hình ảnh thành màu khác

& lt; /

title

& gt;

& lt;

style

& gt;

img

{

width

:

40%

;

float

: left; }

. image-1

{

filter

:

invert

(

100%

); -webkit-

bộ lọc

:

invert

(

100% ); }

. image-2

{

filter

:

sepia

(

100%

); -webkit-

bộ lọc

:

nâu đỏ

(

100% ); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Thay đổi màu ảnh PNG

& lt; /

h2

& gt;

& lt;

img

class

=

" image-1 "

src

=

" https://images.unsplash.com/photo -1480044965905-02098d419e96? Ixlib = rb-1.2.1

& amp; amp;

ixid = eyJhcHBfaWQiOjEyMDd9

& amp; amp; auto = format

& amp; amp;

fit = crop

& amp; amp;

w = 1000

& amp; amp;

q = 80 "

width

=

" 500px "

height

=

" 250px "

alt < / p> =

"bộ lọc được áp dụng"

/ & gt;

& lt;

img

class

=

" image-2 "

src

=

" https://images.unsplash.com/photo -1448227922836-6d05b3f8b663? Ixlib = rb-1.2.1

& amp; amp;

ixid = eyJhcHBfaWQiOjEyMDd9

& amp; amp; auto = format

& amp; amp;

fit = crop

& amp; amp;

w = 1000

& amp; amp;

q = 80 "

width

=

" 500px "

height

=

" 250px "

alt < / p> =

"bộ lọc được áp dụng"

/ & gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Thay đổi màu ảnh PNG

Tiếp theo, hãy xem một ví dụ khác với tám giá trị của thuộc tính bộ lọc.

Ví dụ về cách thay đổi màu của Hình ảnh PNG với một số kiểu bộ lọc:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-color

:

# 03030a

;

min-width

:

800px

;

min-height

:

400px

}

img

{

width

:

20%

;

float

: left;

margin

:

0

; }

. saturate

{

bộ lọc

:

saturate

(

3

); -webkit-

bộ lọc

:

saturate

(

3

); }

. thang độ xám

{

filter

:

grayscale

(

100%

); -webkit-

bộ lọc

:

thang độ xám

(

100%

); }

. Ngược lại

{

filter

:

contra

(

160%

); -webkit-

bộ lọc

:

Contra

(

160% ); }

. độ sáng

{

bộ lọc

:

độ sáng

(

0,25

); -webkit-

bộ lọc

:

độ sáng

(

0,25

); }

. mờ

{

bộ lọc

:

mờ

(

3px

); -webkit-

bộ lọc

:

mờ

(

3px

); }

. invert

{

filter

:

invert

(

100%

); -webkit-

bộ lọc

:

invert

(

100% ); }

. nâu đỏ

{

filter

:

sepia

(

100%

); -webkit-

bộ lọc

:

nâu đỏ

(

100% ); }

. huerotate

{

bộ lọc

:

hue-Rot

(

180deg

) ; -webkit-

bộ lọc

:

hue-Rot

(

180deg ); }

. opacity

{

filter

:

opacity

(

50%

); -webkit-

bộ lọc

:

opacity

(

50% ); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Thay đổi màu ảnh PNG

& lt; /

h2

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" original "

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" saturate "

lớp

=

"bão hòa"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" thang độ xám "

lớp

=

"thang độ xám"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" tương phản "

lớp

=

"độ tương phản"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" độ sáng "

lớp

=

"độ sáng"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" mờ "

lớp

=

"mờ"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" invert "

class

=

"invert"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" nâu đỏ "

lớp

=

"nâu đỏ"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" huerotate "

lớp

=

"huerotate"

& gt;

& lt;

img

alt

=

" Mona Lisa "

src

=

" http://i.stack.imgur.com/ OyP0g.jpg "

title

=

" opacity "

lớp

=

"độ mờ"

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể áp dụng một kỹ thuật khác. Trong ví dụ tiếp theo, chúng tôi đặt thuộc tính id (“gốc” và “đã thay đổi”) cho & lt; div & gt; các yếu tố. Sau đó, chúng tôi đặt bộ lọc: hue-xoay; trên id “đã thay đổi”.

Ví dụ về cách thay đổi màu của hình ảnh PNG:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Chuyển hình ảnh thành màu khác

& lt; /

title

& gt;

& lt;

style

& gt;

# original

,

# đã thay đổi

{

background

:

url

(

'https: //image.freepik .com / free-photo / cam-đỏ-siamese-chọi-cá-betta-huy hoàng-cô lập-trắng-background_51519-539.jpg '

);

background-size

: cover;

width

:

30%

;

margin

:

0

10%

0

10%

;

padding-bottom

:

28%

;

float

: left; }

# đã thay đổi

{ -webkit-

bộ lọc

:

hue-Rot

(

180deg );

bộ lọc

:

hue-Rot

(

180deg

) ; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Thay đổi màu ảnh PNG

& lt; /

h2

& gt;

& lt;

div

id

=

" original "

& gt;

& lt; /

div

& gt;

& lt;

div

id

=

" đã thay đổi "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề css thay đổi màu sắc hình ảnh

How to add border to HTML image (img) tag using CSS style.

  • Tác giả: Semicolon Dot Dev
  • Ngày đăng: 2021-03-31
  • Đánh giá: 4 ⭐ ( 8476 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 0:00 How to add border to any element (including image) in CSS
    0:10 20px thick border css property
    0:20 How to change border color in CSS
    0:30 How to add rounded corners with border-radius
    0:48 Adding dashed border
    0:54 Adding dotted border

    How to add border to image in CSS and HTML and change border color or thickness (size / width), how to add dashed border to image, how to add dotted border to image

Những thuộc tính css của images mà bạn cần biết

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 4166 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Làm sắc nét hình ảnh với *image-rendering* Khi một hình ảnh được phóng to, trình duyệt làm mịn hình ảnh, do đó, nó không nhìn pixelated. Tuy nhiên, tùy thuộc vào độ phân giải của hình ảnh và màn…

Hướng dẫn CSS thẻ IMG hình ảnh thành màu đen và trắng

  • Tác giả: wpshare247.com
  • Đánh giá: 3 ⭐ ( 2860 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đoạn Css giúp bạn biến bất kì hình ảnh của thẻ img thành màu trắng, màu đen hoặc xám trong quá trình làm website

Thay đổi màu của ảnh

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 6414 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều chỉnh cường độ màu (độ bão hòa), tông màu (nhiệt độ), đổi màu hoặc loại bỏ màu.

Gradient – màu biến đổi tuyến tính trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 8694 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gradient cho phép tạo ra các phần tử có màu nền background là các hiệu ứng chuyển màu giữa hai hay nhiều màu sắc được chỉ định.

Thuộc tính Màu sắc trong CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 8573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu các phương pháp định nghĩa các giá trị màu khác nhau trong CSS theo 3 cách khác nhau

Thay đổi màu sắc sản phẩm bằng CSS

  • Tác giả: megacode.vn
  • Đánh giá: 4 ⭐ ( 1720 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ài viết sau sẽ hướng dẫn các bạn vẽ lại bức họa Mona Lisa nổi tiếng của Leonardo da Vinci chỉ bằng CSS thôi. Bạn sẽ thấy ngỡ ngàng về CSS cho mà xem.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Một số bài toán quy hoạch động điển hình - sắp xếp mảng tăng dần trong c