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 của hình ảnh PNG là sử dụng thuộc tính bộ lọc, áp dụng các hiệu ứng hình ảnh cho phần tử (hình ảnh). Nó có các giá trị sau:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;
Với các giá trị này, chúng ta có thể thay đổi màu của hình ảnh. Bộ lọc là mới đối với các 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 bộ lọc -webkit cho Safari, Google Chrome và Opera. Hãy để thay đổi một màu hình ảnh từng bước. - Sao chép và dán liên kết hình ảnh của bạn trong phần. Chúng tôi sử dụng hai hình ảnh với các lớp của "Image-1" và "Image-2".
<body>
<img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" />
<img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" />
</body>
Bây giờ, chúng tôi thêm các kiểu vào các lớp "Image-1" và "Image-2". - Sử dụng thuộc tính chiều rộng để đặt chiều rộng của cả hai hình ảnh.
- Đặt thuộc tính bộ lọc với giá trị "đảo ngược" của nó trên lớp "Image-1". Chúng tôi đặt 100% để làm cho hình ảnh đảo ngược hoàn toàn.filter property with its "invert" value on the "image-1"class. We set 100% to make the image fully inverted.
- Sử dụng thuộc tính Bộ lọc với giá trị "Sepia" (100%) trên lớp "Image-2".filter property with its
"sepia" value (100%) on the "image-2" class.
img {
width: 40%;
float: left;
}
.image-1 {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.image-2 {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
Vì vậy, hãy để Lừa xem kết quả của mã của chúng tôi. Ví dụ về việc thay đổi màu hình ảnh PNG:
<!DOCTYPE html>
<html>
<head>
<title>Convert image into different color</title>
<style>
img {
width: 40%;
float: left;
}
.image-1 {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.image-2 {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<img class="image-1" src="https://images.unsplash.com/photo-1480044965905-02098d419e96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" />
<img class="image-2" src="https://images.unsplash.com/photo-1448227922836-6d05b3f8b663?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="500px" height="250px" alt="filter applied" />
</body>
</html>
Kết quảThay đổi màu hình ả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.filter property. Ví dụ về việc thay đổi màu của hình ảnh PNG với một số kiểu lọc:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #03030a;
min-width: 800px;
min-height: 400px
}
img {
width: 20%;
float: left;
margin: 0;
}
/*Filter styles*/
.saturate {
filter: saturate(3);
-webkit-filter: saturate(3);
}
.grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.contrast {
filter: contrast(160%);
-webkit-filter: contrast(160%);
}
.brightness {
filter: brightness(0.25);
-webkit-filter: brightness(0.25);
}
.blur {
filter: blur(3px);
-webkit-filter: blur(3px);
}
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
.huerotate {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
}
.opacity {
filter: opacity(50%);
-webkit-filter: opacity(50%);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity">
</body>
</html>
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 các thuộc tính ID ("gốc" và "đã thay đổi") cho các yếu tố của chúng tôi. Sau đó, chúng tôi đặt bộ lọc: Hue-rotate; trên ID "đã thay đổi".id attributes ("original" and "changed") for our elements. Then, we set filter: hue-rotate; on the "changed" id. Ví dụ về việc thay đổi màu của hình ảnh PNG:
<!DOCTYPE html>
<html>
<head>
<title>Convert image into different color</title>
<style>
#original,
#changed {
background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<div id="original"></div>
<div id="changed"></div>
</body>
</html>
Chúng ta có thể thay đổi màu của hình ảnh bằng CSS không?
Cho một hình ảnh và nhiệm vụ là thay đổi màu hình ảnh bằng CSS. Sử dụng chức năng bộ lọc để thay đổi màu hình ảnh PNG. Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng trực quan cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho hàm bộ lọc.Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.
Bạn có thể tạo kiểu cho một hình ảnh trong CSS?
Hình ảnh kiểu dáng trong CSS hoạt động chính xác giống như cách tạo kiểu cho bất kỳ phần tử nào bằng mô hình hộp của đệm, đường viền và lề cho nội dung. Có nhiều cách để đặt kiểu trong hình ảnh được liệt kê dưới đây: hình ảnh thu nhỏ. Hình ảnh tròn.. There are many ways to set style in images which are listed below: Thumbnail images. Rounded images.
Làm thế nào để bạn thay đổi màu của hình ảnh thành màu xanh trong CSS?
Để làm như vậy, chúng tôi sẽ theo cú pháp đã cho:.. Bộ lọc: SEPIA () |Hue-rotate () |bão hòa (). Thay đổi màu của hình ảnh thành màu xanh .... IMG {bộ lọc: SEPIA (100%) Hue-ROTATE (190DEG) SATHATE (900%);.... Thay đổi màu của hình ảnh thành màu xanh nhạt .... IMG {bộ lọc: SEPIA (300%) Hue-ROTATE (150DEG) SATHATE (450%) ;. Làm cách nào để phủ màu trên một hình ảnh trong CSS?
Hiệu ứng lớp phủ có thể đạt được bằng cách sử dụng các thuộc tính nền hình nền của CSS và CSS.Nó có thể được thực hiện bằng cách gán một hình ảnh cho thuộc tính hình ảnh nền và đặt màu trong thuộc tính nền.assigning an image to the background-image property and setting the color in the background property. | 
