Home >Web Front-end >CSS Tutorial >How to distinguish background-clip and background-origin in css3? (code example)
How to distinguish background-clip and background-origin in css3? (code example)
- 青灯夜游Original
- 2018-09-14 16:58:231647browse
This chapter will introduce to you how to distinguish background-clip and background-origin in CSS3? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
In CSS3, background-clip and background-origin have roughly the same functions, but there are some subtle differences.
1. Background-clip attribute
background-clip: Specifies the drawing area of the background. When the background is a pure color and a picture, its display method is different. Same. It has 3 attributes: border-box, padding-box, content-box.
1. border-box: The background is drawn from the border, but when the background is a picture, it is drawn on the left and top There is no picture drawn, but there is one below and on the right;
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width:433px;
height:200px;
padding:50px;
background-color: red;
background-image:url('8.jpg');
background-repeat:no-repeat;
-webkit-background-clip:border-box;
border:10px dashed #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>Rendering:
2. Background-origin attribute
background-origin: Specifies the positioning area of the background image. Its attributes also include border-box, padding-box, and content-box. However, please note that its description is "background image", that is It is said that it can only perform style operations on the background. It is equivalent to positon, which stipulates the area where the picture starts to be drawn. In other words, it is only equivalent to stipulating where the upper left corner of the picture starts, and it is not responsible for the rest;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 500px;
height: 300px;
/*padding: 50px;*/
background-color: red;
background-image: url('8.jpg');
background-repeat: no-repeat;
-webkit-background-origin: content-box;
background-size: 500px 380px;
border: 10px dashed #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>Rendering:
The above is the detailed content of How to distinguish background-clip and background-origin in css3? (code example). For more information, please follow other related articles on the PHP Chinese website!