简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

CSS3 Atribut imej latar belakang

Dalam CSS3, anda boleh menambah imej latar belakang melalui atribut 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. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="example1">
    <h1>正能量</h1>
    <p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
    <p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>

Jalankan program dan cuba

Anda boleh menetapkan berbilang atribut berbeza untuk gambar yang berbeza

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            background: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) right bottom no-repeat, url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg) left top repeat;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="example1">
    <h1>正能量</h1>
    <p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
    <p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>

Jalankan program dan cuba

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. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body
        {
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
            background-size:80px 60px;
            background-repeat:no-repeat;
            padding-top:40px;
        }
    </style>
</head>
<body>
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p>
<p>原始图片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg"  alt="Flowers" width="224" height="162"></p>
</body>
</html>

Jalankan program dan cuba

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
<div>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</div>
</body>
</html>

Jalankan program dan cuba

Css3 background-Origin property

Atribut background-Origin menentukan kawasan lokasi imej latar belakang.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:1px solid black;
            padding:35px;
            background-image:url('https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg');
            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>

Jalankan program dan cuba

Sifat klip latar belakang CSS3

Sifat keratan latar belakang klip latar dalam CSS3 mula melukis dari kedudukan yang ditentukan 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        #example1 {
            border: 10px dotted #e53f3f;
            padding:35px;
            background: yellow;
        }
        #example2 {
            border: 10px dotted #4fcfc4;
            padding:35px;
            background: yellow;
            background-clip: padding-box;
        }
        #example3 {
            border: 10px dotted #8ceed8;
            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>

Jalankan program dan cuba

Atribut latar belakang baharu

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



Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> #example1 { background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> </head> <body> <div id="example1"> <h1>正能量</h1> <p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p> <p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492173 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！