How to distinguish background-clip and background-origin in css3? (code example)-CSS Tutorial-php.cn

How to distinguish background-clip and background-origin in css3? (code example)

青灯夜游

Release： 2018-09-14 16:58:23

Original

1690 people have browsed it

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(&#39;8.jpg&#39;);
			　　background-repeat:no-repeat;
			　　-webkit-background-clip:border-box;
			　　border:10px dashed  #92b901;
			}
		</style>
	</head>

	<body>
		<div>
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
	</body>

</html>

Copy after login

Rendering:

How to distinguish background-clip and background-origin in css3? (code example)

##2. padding- box: The background is drawn inside the border (excluding the border);

3. content-box: The background is drawn from the content part;

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(&#39;8.jpg&#39;);
				background-repeat: no-repeat;
				-webkit-background-origin: content-box;
				background-size: 500px 380px;
				border: 10px dashed #92b901;
			}
		</style>
	</head>

	<body>

		<div>
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>

	</body>

</html>

Copy after login

Rendering:

How to distinguish background-clip and background-origin in css3? (code example)

background-origin: When drawing a picture, you can start from the border, but some content may be covered by the border. , as shown in the second picture above

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!