Hariom Prajapati
15 Aug 2022
CSSIt is use to defines gapping between element and background (color or image).
Syntax -
background-clip: value;
values
| border-box |
This is default value It is use to extend back ground behind the boarder |
| padding-box |
It is use to extend back ground to inside edge of the boarder. |
| content-box | It is use to extend back ground to content box |
| Text | It is use to set background only behind the text structure.(need prefix according to browser or OS like webkit, moz etc to run text value.) |
| Initial | It is use to set back ground to default value |
For example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teknowize</title>
<style>
h1 {
background-size: 75% 75%;
background-image: linear-gradient(to right, blue 0%, red 100%), url('download.jpg');
background-repeat: no-repeat;
background-blend-mode: darken;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
Output
