ホームページ > 記事 > ウェブフロントエンド > CSS3でbackground-orginを使用する方法（コード付き）

CSS3でbackground-orginを使用する方法（コード付き）

不言オリジナル: 2018-08-20 11:36:071920ブラウズ

この記事の内容は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を使用する方法（コード付き）

関連記事