Hướng dẫn css filter green color

.element {
  position: relative;
}
.element::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url[image-to-be-filtered.jpg];
  filter: grayscale[100%];
}
.element-inside {
  /* Sử dụng position relative sẽ làm cho nó xếp chồng lên trên thẻ ::before */
  position: relative;
}

  

    element
  

I want only red and blue color component in the image [or text]. Can I use CSS 'filter' feature for that ? If yes, please help. Thank you.

asked Aug 22, 2020 at 17:51

1

There is no such thing in CSS AFAIK, but you can use Canvas API to obtain image data via getImageData and filter out the required component manually with javascript code.

answered Aug 22, 2020 at 17:58

olkivanolkivan

891 silver badge3 bronze badges

You can try using the filter[] property of CSS [MDN]. It can apply effects on HTML elements including modifying colors. For your specific case, it would be required to define an own filter.

Look at this example: //codesandbox.io/s/happy-browser-wgvu8?file=/index.html

    
        .filter-this {
          filter: url[#myfilter];
        }

    



    

        I am red
    
    

        I am green
    
    

        I am blue
    
    

        I am yellow
    
    
    
     
    
    

The value of the feColorMatrix is a matrix which will be multiplied with every pixel. The input vectors are RGBa values appended with a 1 [1 1 0 1 1 for yellow]. By making the second row of the transformation matrix all zero, it removes the green component turning the green text to black and the yellow text to red.

answered Aug 22, 2020 at 21:08

CC.CC.

4524 silver badges11 bronze badges

Example

Change all images to black and white [100% gray]:

img {
  filter: grayscale[100%];
}

Try it Yourself »

Tip: More "Try it Yourself" examples below.

Definition and Usage

The filter property defines visual effects [like blur and saturation] to an element [often ].

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

CSS Syntax

filter: none | blur[] | brightness[] | contrast[] | drop-shadow[] | grayscale[] | hue-rotate[] | invert[] | opacity[] | saturate[] | sepia[] | url[];

Tip: To use multiple filters, separate each filter with a space [See "More Examples" below].

Filter Functions

Note: The filters that use percentage values [i.e. 75%], also accept the value as decimal [i.e. 0.75].

More Examples

Blur Example

Apply a blur effect to the image:

img {
  filter: blur[5px];
}

Try it Yourself »

Blur Example 2

Apply a blurred background image:

img.background {
  filter: blur[35px];
}

Try it Yourself »

Brightness Example

Adjust the brightness of the image:

img {
  filter: brightness[200%];
}

Try it Yourself »

Contrast Example

Adjust the contrast of the image:

img {
  filter: contrast[200%];
}

Try it Yourself »

Drop Shadow Example

Apply a drop shadow effect to the image:

img {
  filter: drop-shadow[8px 8px 10px gray];
}

Try it Yourself »

Grayscale Example

Convert the image to grayscale:

img {
  filter: grayscale[50%];
}

Try it Yourself »

Hue Rotation Example

Apply a hue rotation on the image:

img {
  filter: hue-rotate[90deg];
}

Try it Yourself »

Invert Example

Invert the samples in the image:

img {
  filter: invert[100%];
}

Try it Yourself »

Opacity Example

Set the opacity level for the image:

img {
  filter: opacity[30%];
}

Try it Yourself »

Saturate Example

Saturate the image:

img {
  filter: saturate[800%];
}

Try it Yourself »

Sepia Example

Convert the image to sepia:

img {
  filter: sepia[100%];
}

Try it Yourself »

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important [i.e. using grayscale[] after sepia[] will result in a completely gray image]:

img {
  filter: contrast[200%] brightness[150%];
}

Try it Yourself »

All Filters

A demonstration of all filter functions:

.blur {
  filter: blur[4px];
}

.brightness {
  filter: brightness[0.30];
}

.contrast {
  filter: contrast[180%];
}

.grayscale {
  filter: grayscale[100%];
}

.huerotate {
  filter: hue-rotate[180deg];
}

.invert {
  filter: invert[100%];
}

.opacity {
  filter: opacity[50%];
}

.saturate {
  filter: saturate[7];
}

.sepia {
  filter: sepia[100%];
}

.shadow {
  filter: drop-shadow[8px 8px 10px green];
}

Try it Yourself »

Related Pages

CSS Tutorial: CSS Images

HTML DOM reference: filter property