CSS3の背景

CSS3 背景

CSS3 には、背景要素をより詳細に制御できるようにするいくつかの新しい背景プロパティが含まれています。

この章では、次の背景プロパティについて学習します:

background-imagebackground-sizebackground-originbackground-clip

複数の背景画像の使用方法も学習します。

CSS3のbackground-imageプロパティ

CSS3では、background-imageプロパティを通じて背景画像を追加できます。

異なる背景画像と画像はカンマで区切られており、すべての画像の一番上に表示される画像が最初の画像となります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background-image: url(../style/images/img_flwr.gif), url(../style/images/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

異なる画像に対して複数の異なる属性を設定できます

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background: url(../style/images/img_flwr.gif) right bottom no-repeat, url(../style/images/paper.gif) left top repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

CSS3の背景サイズ属性

background-sizeは、背景画像のサイズを指定します。 CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。

CSS3で背景画像を指定できるため、環境ごとに背景画像のサイズを再指定できます。サイズはピクセルまたはパーセンテージで指定できます。

指定するサイズは、親要素の幅と高さのパーセンテージです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
body
{
background:url(../style/images/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg"  alt="Flowers" width="224" height="162"></p>
</body>
</html>

CSS3のbackground-Originプロパティ

background-Originプロパティは、背景画像の位置領域を指定します。

背景画像は、コンテンツボックス、パディングボックス、およびボーダーボックスの領域に配置できます。

CSS3 複数の背景画像

CSS3 を使用すると、要素

に複数の背景画像を追加できます。

CSS3の背景クリッププロパティ

CSS3のbackground-clip背景クリッピングプロパティは、指定された位置から描画を開始します。

新しい背景属性シーケンス

説明

CSS

BACKROUND-CLIPは、背景の描画領域を指定します。 3

Background-Originは、背景画像の配置領域を指定します。 3

Background-size は、背景画像のサイズを指定します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background:url(../style/images/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p> </body> </html>

提出するリセットコード

自動運転