Detailed explanation of CSS3 new properties Background-Origin and Background-Clip-CSS Tutorial-php.cn

Detailed explanation of CSS3 new properties Background-Origin and Background-Clip

不言

Release： 2018-11-07 13:56:49

Original

2652 people have browsed it

In this article, we will discuss the two new extended attributes Background-Origin and Background-Clip added to the background attribute in CSS3. Friends in need can take a look and hope to help you.

Background-Origin

Before the Background-Origin property appeared, when we added a background image to an element, the image position was filled from the element starting from the upper left corner.

Print the screen at the default background origin position. If background-position is set to left (left) 0, top (top) 0, you can see the background image in the filled area (red dot). (Recommended tutorial: CSS3 Video Tutorial)

Detailed explanation of CSS3 new properties Background-Origin and Background-Clip

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{ background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}

.box span{color:#000; display:block; font-size:30px; font-weight:bold; height:100%; text-transform:uppercase; background-color:rgba(256,256,256,0.5)}
</style>
</head>
<body>
<div class="box">
  <span> </span>
</div>
</body>
</html>

Copy after login

Background-Origin allows you to decide what you want The starting point of the background position, border, padding and content.

The new attribute background-origin has 3 values according to the box-model:

1. border-box - Position the background position 0, 0 points to the upper left corner of the border.

2. padding-box (default) - Position the background position at 0,0 point in the upper left corner of the padding.

3. content-box - Position the background position 0,0 to point to the upper left corner of the content.

Detailed explanation of CSS3 new properties Background-Origin and Background-Clip

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{
 background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}
.box span{
 color:#000; 
 display:block; font-size:30px; 
 font-weight:bold; height:100%; 
 text-transform:uppercase; 
 background-color:rgba(256,256,256,0.5)
}
.box1{background-origin:border-box;}
.box2{background-origin:padding-box;}
.box3{background-origin:content-box;}
</style>
</head>
<body>
<div class="box box1">
  <span> </span>
</div>
<div class="box box2">
  <span> </span>
</div>
<div class="box box3">
  <span> </span>
</div>
</body>
</html>

Copy after login

In the above example and picture, you can see the impact of the Background-Origin value.

background-clip

As you can see in the previous example, background-origin is fine but still missing something. The image is positioned according to the Background-Origin, but to the right/bottom of the border/padding.

background-clip can solve this problem! Using background-clip, we can decide where to clip the background image, which is the same value as the background origin mentioned earlier.

The new property of background-clip also has 3 values:

1, border-box (default) - displays the complete image and will not cut any content.

2. padding-box - cut the border background image.

3. content-box- Cut the border and fill the background image.

Detailed explanation of CSS3 new properties Background-Origin and Background-Clip

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{
 background:url("image/flowers.jpg") no-repeat;  
  width:500px;
  height:500px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px;
  box-sizing:border-box;
}
.box span{
color:#000; 
display:block; 
font-size:30px; 
font-weight:bold; 
height:100%; 
text-transform:uppercase; 
background-color:rgba(256,256,256,0.5)
}
.box1{
  background-origin:border-box;
  background-clip:border-box;
}
.box2{
  background-origin:padding-box;
  background-clip:padding-box;
}
.box3{
  background-origin:content-box;
  background-clip:content-box;
}

</style>
</head>
<body>
<div class="box box1">
  <span> </span>
</div>
<div class="box box2">
  <span> </span>
</div>
<div class="box box3">
  <span> </span>
</div>
</body>
</html>

Copy after login

As you can see in the previous example, background-origin and background-clip work well together, large Most of the time you will use the same value, for example, let's say you use the "content-box" value to both position the background image to the content and clip the background image at the padding and borders.

You can also use this property to make a better background effect, see this example: I centered the background image, in the first line I completely kept the background size and used both background-origin and background- clip as well as the second line of this example I have stretched the background image size to fit the entire box with the background-size property and executed it again using both background-origin and background-clip.

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
.box{ 
background:url("image/flowers.jpg") no-repeat center center;  
  width:300px;
  height:300px;  
  border:solid 50px rgba(0,0,0,0.5);  
  padding:50px;
  float:left;
  margin-right:15px; margin-bottom:15px;
  box-sizing:border-box;
}
.box span{
color:#000; 
display:block; 
font-size:30px; 
font-weight:bold; 
height:100%; 
text-transform:uppercase; 
background-color:rgba(256,256,256,0.5)}
.box1{
  background-clip:border-box;
  background-origin:border-box;
}
.box2{
  background-clip:padding-box;
  background-origin:padding-box;
}
.box3{
  background-clip:content-box;
  background-origin:content-box;
}
.cover{
background-size:cover; 
margin-top:10px;
}
</style>
</head>
<body>
<div class="box box1">
  <span></span>
</div>
<div class="box box2">
  <span></span>  
</div>
<div class="box box3">
  <span></span>  
</div>
<div class="box box1 cover" style="clear:both;">
  <span></span>
</div>
<div class="box box2 cover">
  <span></span>  
</div>
<div class="box box3 cover">
  <span></span>  
</div>
</body>
</html>

Copy after login

The effect is as follows:

Detailed explanation of CSS3 new properties Background-Origin and Background-Clip

##As shown above, you can use Background-Origin and Background -Clip These two new features create some great effect pictures.

The above is the detailed content of Detailed explanation of CSS3 new properties Background-Origin and Background-Clip. For more information, please follow other related articles on the PHP Chinese website!