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中文網(wǎng)(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>你是否經(jīng)常狠不下心來做事，對自己不夠狠，對別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
    <p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會一笑置之，超然待之，要學(xué)會轉(zhuǎn)化勢能。智者懂得隱忍，原諒周圍的那些人，讓我們在寬容中壯大。</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中文網(wǎng)(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>你是否經(jīng)常狠不下心來做事，對自己不夠狠，對別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p>
    <p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會一笑置之，超然待之，要學(xué)會轉(zhuǎn)化勢能。智者懂得隱忍，原諒周圍的那些人，讓我們在寬容中壯大。</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中文網(wǎng)(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>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</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中文網(wǎng)(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>人心靈的傷痛若無知己來撫慰，便會荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。</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中文網(wǎng)(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中文網(wǎng)(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	規(guī)定背景的繪制區(qū)域。	3
background-origin	規(guī)定背景圖片的定位區(qū)域。	3
background-size	規(guī)定背景圖片的尺寸。	3

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>你是否經(jīng)常狠不下心來做事，對自己不夠狠，對別人也不夠狠。所以，你總是黏黏糊糊，總是不忍心去拒絕別人，總是下不了決心讓自己過的更好，總是纏綿過往不能自拔……完了，優(yōu)柔寡斷的你，必須狠一次，否則你永遠(yuǎn)也活不出自己</p> <p>別為小小的委屈難過，人生在世，注定要受許多委屈。一個(gè)人越是成功，他所遭受的委屈也越多。要使自己的生命獲得極值和炫彩，就不能太在乎委屈，不能讓它們揪緊你的心靈、擾亂你的生活。你要學(xué)會一笑置之，超然待之，要學(xué)會轉(zhuǎn)化勢能。智者懂得隱忍，原諒周圍的那些人，讓我們在寬容中壯大。</p> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik