latar belakang CSS3
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:
latar belakang-gambar-latar belakang-size-latar belakang-asal-belakang-klip
Anda juga akan belajar cara menggunakan berbilang imej latar belakang.
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.
<!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>Anda boleh menetapkan berbilang atribut berbeza untuk imej berbeza
<!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>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(../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>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.
Imej Berbilang Latar Belakang CSS3
CSS3 membolehkan anda menambah imej latar belakang pada elemen Tambah berbilang imej latar belakang.
Harta keratan latar belakang klip latar belakang dalam CSS3 mula dilukis dari kedudukan yang ditentukan. Sifat latar belakang baharu Pesanan CSS Latar Belakang-Asal menentukan kawasan kedudukan gambar latar belakang. 3
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
