latar belakang CSS3

Latar Belakang CSS3

CSS3 mengandungi beberapa sifat latar belakang baharu untuk memberikan kawalan yang lebih besar ke atas elemen latar belakang.

Dalam bab ini anda akan mempelajari tentang sifat latar belakang berikut:

imej latar belakang
saiz latar belakang
asal latar belakang
klip latar belakang

Anda juga akan belajar cara menggunakan berbilang imej latar belakang .

Sokongan penyemak imbas

Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong atribut ini.

Nombor sejurus sebelum -webkit-, -ms- atau -moz- ialah nombor versi penyemak imbas pertama yang menyokong atribut awalan ini.

Sifat imej latar belakang CSS3

Dalam CSS3, anda boleh menambah imej latar belakang melalui sifat imej latar belakang .

Imej latar belakang dan imej yang berbeza dipisahkan dengan koma, dan imej yang dipaparkan di bahagian atas semua imej ialah yang pertama.

Instance

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

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Anda boleh menetapkan berbilang atribut berbeza untuk imej berbeza

Instance

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

Jalankan instance»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Atribut saiz latar belakang CSS3

saiz latar belakang menentukan saiz imej latar belakang. Sebelum CSS3, saiz imej latar belakang ditentukan oleh saiz sebenar imej.

Imej latar belakang boleh ditentukan dalam CSS3, membolehkan kami menentukan semula saiz imej latar belakang dalam persekitaran yang berbeza. Anda boleh menentukan saiz dalam piksel atau peratusan.

Saiz yang anda tentukan ialah peratusan lebar dan tinggi elemen induk.

Instance

<!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="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	background:url(../style/images/img_flwr.gif);
	background-size:100% 100%;
	background-repeat:no-repeat;
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</body>
</html>

Run Instance»

Klik "Run Instance" butang untuk melihat contoh dalam talian

Atribut background-Origin CSS3

atribut background-Origin menentukan kawasan lokasi imej latar belakang.

Imej latar belakang boleh diletakkan di kawasan kotak kandungan, kotak padding dan kotak sempadan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
	border:1px solid black;
	padding:35px;
	background-image:url('../style/images/smiley.gif');
	background-repeat:no-repeat;
	background-position:left;
}
#div1
{
	background-origin:border-box;
}
#div2
{
	background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Run instance»

Klik "Run Butang " Contoh" untuk melihat contoh dalam talian

imej latar belakang berbilang CSS3

CSS3 membolehkan anda menambah berbilang imej latar belakang pada elemen

Instance

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

Instance Running»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

sifat klip latar belakang CSS3

klip latar belakang latar belakang dalam CSS3 Atribut keratan diambil dari kedudukan yang ditentukan

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}
</style>
</head>
<body>

<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Run Instance»

Klik " Butang Run Instance" untuk melihat Contoh Dalam Talian

Atribut latar belakang baharu

Pesanan

Penerangan

CSS

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

klip latar belakang

<🎜>Menentukan kawasan lukisan latar belakang. <🎜><🎜>3<🎜><🎜><🎜><🎜>asal latar belakang<🎜><🎜>Menentukan kawasan kedudukan imej latar belakang. <🎜><🎜>3<🎜><🎜><🎜><🎜>saiz latar belakang<🎜><🎜>Menentukan saiz imej latar belakang. <🎜><🎜>3<🎜><🎜><🎜><🎜><🎜><🎜><🎜>

← CSS3 sudut bulat

Kecerunan CSS3 →

serahkan

latar belakang CSS3