简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

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

不言
發布： 2018-08-20 11:36:07
原創
1955 人瀏覽過

這篇文章帶給大家的內容是關於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-origin和background-clip的差異_html/css_WEB-ITnose

css3,background-clip/background-origin的使用場景，通俗解說_html/css_WEB-ITnose

以上是css3中background-orgin的使用方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
background-orgin
來源：php.cn
上一篇：css如何使用opacity屬性為背景圖片加上透明度（代碼） 下一篇：css3中顏色線性漸層色彩的實作程式碼
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
為什麼我的 hr 標籤設定為白色純色時是半透明的？ 我有一個html（帶有引導程式）和一個CSS，在我的html中我有一個<hr>標籤，它有一個類，然後在我的CSS中我有它的邊框樣式。它是半透明的，你可以看到白色，但它不...
來自於 2024-04-06 16:13:26
0
1
500
顯示隱藏的側邊面板：選中 我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...
來自於 2024-04-06 15:49:33
0
1
319
導覽列上的CSS底部邊框 我有一個導航欄，當懸停列表中的任何項目時，我在底部添加了一條紅線，但我想將該紅線移到標題下方（例如“服務”），知道如何實現此目的？我在codepen中新增了一個小範例，以便您可以輕...
來自於 2024-04-06 15:04:41
0
2
347
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！