- The background-clip property in CSS is used to control the extent to which the background of an element is visible. It determines how far the background extends within an element, relative to the element's border box.
- border-box: This is the default value. It means that the background extends to the outer edges of the element, including behind the border and padding.
- padding-box: With this value, the background extends to the inner edges of the element's padding box, excluding the area occupied by the border.
- content-box: This value limits the background to the area within the content box of the element, excluding the padding and border areas.
- text: This value is used to clip the background to the text content of an element. The background is only visible where there is text present.
- Program 01:
<!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>Document</title>
<style>
.maindiv {
width: 40vw;
border: 5px dotted red;
padding: 50px;
background-color: aquamarine;
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="maindiv">
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est earum quidem distinctio, beatae officia
architecto dolor dignissimos sed cum magnam amet rerum laudantium delectus necessitatibus blanditiis harum
quasi aut repudiandae, illum explicabo? Voluptatum qui amet est! Expedita quidem iste animi aut eaque, dicta
sit. Voluptate similique velit aliquam placeat minima blanditiis odio exercitationem explicabo ducimus
molestiae vel sapiente enim, tenetur voluptatibus soluta obcaecati! Reiciendis, dolor aperiam? Incidunt
velit ipsa aliquam recusandae aperiam delectus et inventore quia magni, similique nemo, obcaecati, explicabo
aut ratione! Odit ea ducimus maxime eaque architecto quos nam neque optio, similique obcaecati, esse
deserunt delectus hic a.</span>
</div>
</body>
</html>
- Output:
- Program 02: The background-clip property is set to border-box, which means the background image extends to the outer edges of the element, including behind the border and padding.
<style>
.maindiv {
width: 40vw;
border: 5px dotted red;
padding: 50px;
background-color: aquamarine;
background-clip: border-box;
}
</style>
- Output:
- Program 03:
<style>
.maindiv {
width: 40vw;
border: 5px dotted red;
padding: 50px;
background-color: aquamarine;
background-clip: content-box;
}
</style>
- Output:
- Note that the background-clip property affects only the background of an element and does not have any effect on other content or elements within the element.
No comments:
Post a Comment