background-clip

is used to appropriately crop the background image to meet actual needs.

Grammar structure:

background-clip:border-box|padding-box|content-box|no-clip

This attribute is used to specify in which areas the background image can be displayed. Of course, the area that can be displayed is determined by the attribute value.
一.border-box attribute:
This attribute value stipulates that the background image can be displayed within the border range. The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
}
.border-box{
  background-clip:border-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box"></li>
</ul>
</body>
</html>

The performance of the above code can It can be seen that the background image can be displayed in the border, but the background image is not displayed in the left and upper borders. This is because it is restricted by the background-origin attribute, because this attribute specifies the area from which the background image is drawn. , in the default state, the padding area is drawn (including padding).
2.padding-box attribute:
This attribute stipulates that the background image can be displayed within the padding range. At this time, the background image cannot be displayed within the border range. The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.padding-box{
  background-clip:padding-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="padding-box"></li>
</ul>
</body>
</html>

It can be seen from the performance of the above code that the background image can be drawn within the padding range, but not within the border range.
3.content-box:
This attribute stipulates that the background image can be displayed in the content area, that is, the area excluding padding and border. The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.content-box{
  background-clip:content-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="content-box"></li>
</ul>
</body>
</html>

It can be seen from the performance of the above code that the background image can only be displayed within the content range at this time.
四.tex:
Crop outward from the shape of the foreground content (such as text) as the cropping area, that is to say, only the background image is displayed within the shape of the foreground content, for example, only the text is displayed background.
The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:250px;
  height:200px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
  font-size:60px;
  font-weight:900
}
.border-box{
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; 
  /*color:transparent;*/
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box">php中文网</li>
</ul>
</body>
</html>

As can be seen from the performance of the above code, the background image is only displayed within the text, but it should be noted that the text-fill-color or color attribute value of the text must be set to transparent, otherwise the background image will be blocked.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ask.php.cn/" /> <title>background-clip属性-php中文网</title> <style type="text/css"> ul li{ border:10px dashed green; width:250px; height:200px; padding:10px; margin-top:10px; list-style:none; background-repeat:no-repeat; font-size:60px; font-weight:900 } .border-box{ -webkit-background-clip:text; -webkit-text-fill-color:transparent; /*color:transparent;*/ background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg); } </style> </head> <body> <ul class="test"> <li class="border-box">php中文网</li> </ul> </body> </html>

submit Reset Code

Automatic operation

background-clip

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]