배경 클립

은 실제 요구에 맞게 배경 이미지를 적절하게 자르는 데 사용됩니다.

문법 구조:

배경 클립: border-box|padding-box|content-box|no-clip

이 속성은 배경 이미지가 표시될 수 있는 영역을 지정하는 데 사용됩니다. 물론 표시할 수 있는 영역은 속성 값에 따라 결정됩니다.
1. border-box 속성:
테두리 범위 내에서 배경 이미지를 표시할 수 있도록 규정하는 속성 값입니다.

<!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>

위 코드의 성능을 보면 테두리 부분에는 배경 이미지가 표시되지만 왼쪽 및 위쪽 테두리에는 배경 이미지가 표시되지 않는 것을 알 수 있습니다. 이는 background-origin 속성에 의해 제한되기 때문입니다. 속성은 배경 이미지가 그려지는 영역을 지정합니다. 기본 상태에서는 패딩 영역이 그려집니다(패딩 포함).
2. padding-box 속성:
이 속성은 패딩 범위 내에서 배경 이미지를 표시할 수 있음을 규정합니다. 코드 예시는 다음과 같습니다.

<!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>

위 코드의 성능에서 알 수 있듯이 패딩 범위 내에서는 배경 이미지를 그릴 수 있지만 테두리 범위 내에서는 그릴 수 없습니다.
3.content-box:
콘텐츠 영역, 즉 패딩과 테두리를 제외한 영역에 배경 이미지를 표시할 수 있도록 규정하는 속성입니다. 코드 예시는 다음과 같습니다.

<!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>

위 코드의 성능을 보면 현재는 콘텐츠 범위 내에서만 배경 이미지가 표시될 수 있음을 알 수 있습니다.
IV.tex:
전경 콘텐츠(예: 텍스트)의 모양에서 바깥쪽으로 자르기 영역을 지정합니다. 즉, 배경 이미지만 모양 안에 표시됩니다. 전경 콘텐츠(예: 텍스트만 배경에 표시됨)
코드 예시는 다음과 같습니다.

<!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>

위 코드의 성능에서 알 수 있듯이 배경 이미지는 텍스트 내에서만 표시되는데, text-fill- 텍스트의 색상 또는 색상 속성 값을 투명으로 설정해야 합니다. 그렇지 않으면 배경 이미지가 차단됩니다.

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전