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

Home

Web Front-end

CSS Tutorial

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

不言

Nov 07, 2018 pm 01:44 PM

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>

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>

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>

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

Feeling Like I Have No Release: A Journey Towards Sane DeploymentsApr 23, 2025 am 09:19 AM

Deploying like an idiot comes down to a mismatch between the tools you use to deploy and the reward in complexity reduced versus complexity added.

So, You Want to Give Up CSS Pre- and Post-Processors...Apr 23, 2025 am 09:18 AM

There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.

A New 'Web' Readiness ReportApr 23, 2025 am 09:14 AM

HTML 5 Readiness was a site that showed through a rainbow of colors the browser support for several web features. What about a new version?

Crafting Strong DX With Astro Components and TypeScriptApr 23, 2025 am 09:10 AM

One thing we can do to help teams code consistently is provide type-checking so that all of the configurable options for a specific component are available while coding. Bryan demonstrates how he does this with TypeScript when working with Astro comp

Simulating Mouse MovementApr 22, 2025 am 11:45 AM

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks agoByDDD

Atomfall guide: item locations, quest guides, and tips

4 weeks agoByDDD

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.