Change image properties using css with filter
Change image properties using css with filter
Here we describe how can we change image effects using CSS Tools. Using "filter" option we can apply any effects using CSS tools.
1. filter:blur(12px); :- Using blur option we can blurred background image.
2. filter:grayscale(1); :- Using grayscale we can put black and white effect on our image.
3. filter:sepia(1); :- Using sepia option we apply negative effects on image.
4. filter:hue-rotate(90deg); :-
5. filter:invert(.6);
<html>
<head>
<style>
.a
{
background-image: url("17.jpg");
background-color: rgb(100,200,160);
height:500px;
width:500px;
background-size:500px 500px;
filter:blur(10px);
}
</style>
</head>
<body>
<div class="a">
<h1>Hyper Text Mark up Language</h1>
</div>
</body>
<html>
Here we describe how can we change image effects using CSS Tools. Using "filter" option we can apply any effects using CSS tools.
1. filter:blur(12px); :- Using blur option we can blurred background image.
2. filter:grayscale(1); :- Using grayscale we can put black and white effect on our image.
3. filter:sepia(1); :- Using sepia option we apply negative effects on image.
4. filter:hue-rotate(90deg); :-
5. filter:invert(.6);
<html>
<head>
<style>
.a
{
background-image: url("17.jpg");
background-color: rgb(100,200,160);
height:500px;
width:500px;
background-size:500px 500px;
filter:blur(10px);
}
</style>
</head>
<body>
<div class="a">
<h1>Hyper Text Mark up Language</h1>
</div>
</body>
<html>
Comments
Post a Comment