Home > Article > Web Front-end > How to use background-orgin in css3 (with code)

How to use background-orgin in css3 (with code)

不言Original: 2018-08-20 11:36:071963browse

The content of this article is about how to use background-orgin in css3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Set the original starting position of the element's background image.

Syntax:

background-origin: border-box | padding-box | content-box;
Parameters indicate whether the background image comes from the border or the inner margin (default value) , or the content area starts to display.

The effect is as follows:

How to use background-orgin in css3 (with code)

It should be noted that if the background is not no-repeat, this attribute is invalid and it will be displayed starting from the border.

Example code:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
    width:220px; 
    border:20px dashed #000; 
    padding:20px; 
    font-weight:bold; 
    color:#000; 
    background:#ccc url(http://static.php.cn/static/img/logo_index.png) no-repeat; 
    background-origin: content-box;    
    position: relative;
    }
.wrap span { 
    position: absolute; 
    left:0; 
    top:0;
    }
.content {
    height:80px; 
    border:1px solid #333;
    }
</style>  
</head> 
<body>
<div class="wrap">
<span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>

Related recommendations:

The difference between background-origin and background-clip in CSS3_html/css_WEB-ITnose

css3, background-clip/background-origin usage scenarios, simple explanation_html/css_WEB-ITnose

The above is the detailed content of How to use background-orgin in css3 (with code). 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

Previous article：How to use the opacity attribute in css to add transparency to a background image (code)Next article：How to use the opacity attribute in css to add transparency to a background image (code)

See more

How to use background-orgin in css3 (with code)

Related articles