首頁 >web前端 >css教學 >css3中background-orgin的使用方法（附程式碼）

css3中background-orgin的使用方法（附程式碼）

不言原創: 2018-08-20 11:36:071991瀏覽

這篇文章帶給大家的內容是關於css3中background-orgin的使用方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

設定元素背景圖片的原始起始位置。

語法：

background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，還是內邊距（預設值），或者是內容區域開始顯示。

效果如下：

css3中background-orgin的使用方法（附程式碼）

要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

實例程式碼：

<!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>

css3中background-orgin的使用方法（附程式碼）

相關文章