<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div.first{
background-color:lightblue;
border:2px dotted black;
padding:20px;
background-clip:padding-box;
}
div.second{
background-color:lightblue;
border:2px solid black;
padding:20px;
background-clip: content-box;
}
div.third{
background-color:lightblue;
border:2px solid black;
padding:20px;
background-clip: border-box;
}
div.image{
background-image: url("https://www.linkpicture.com/q/0_15.png");
background-size:50px 50px;
background-clip: content-box;
padding:50px;
text-align: center;
border: dashed 2px black;
}
</style>
</head>
<body>
<div class="first">
<h1>background-clip: padding-box</h1>
The blue background extends behind the border.
</div><br/>
<div class="second">
<h1>background-clip: content-box</h1>
The blue background extends only to the edge of the content box.</div> <br />
<div class="third">
<h1>background-clip: border-box</h1>
The blue background extends to the outside edge of the border.</div>
<h1>background-clip with images</h1>
<div class="image"><h3>content</h3>
</div>
</body>
</html>
OUTPUT
Comments
Post a Comment