Tetapkan saiz imej latar belakang menggunakan CSS?-tutorial css-php.cn

Tetapkan saiz imej latar belakang menggunakan CSS?

WBOY

Lepaskan： 2023-09-08 09:05:02

ke hadapan

1580 orang telah melayarinya

Tetapkan saiz imej latar belakang menggunakan CSS?

Menggunakan CSS, kita boleh menetapkan imej latar belakang untuk elemen HTML menggunakan sifat 'background-image'. Selain itu, selepas menambah imej latar belakang, anda perlu menetapkan dimensinya.

Kita boleh menggunakan sifat "saiz latar belakang" CSS untuk menetapkan saiz imej latar belakang.

Tatabahasa

Pengguna boleh menggunakan CSS untuk menetapkan saiz imej latar belakang dengan mengikut sintaks di bawah.

background-size: width length | width | contain | inherit | cover | initial

Salin selepas log masuk

Kita boleh menggunakan nilai di atas untuk menetapkan saiz imej latar belakang. Di sini kami telah menerangkan semua nilai.

Panjang Lebar - Tetapkan lebar dan ketinggian imej latar belakang. Pengguna boleh menggunakan piksel, peratusan atau rem untuk nilai lebar dan panjang.
Width - Ia hanya menetapkan lebar imej dan menetapkan ketinggian "auto".
Mengandungi − Digunakan untuk menetapkan imej latar belakang elemen HTML tanpa mengurangkan saiz imej latar belakang.
Warisi − Ia mewarisi saiz imej latar belakang daripada imej latar belakang elemen induk.
Sampul − Ia menetapkan dimensi imej latar belakang dengan cara yang boleh dimuatkan ke dalam elemen HTML.

Contoh 1

Dalam contoh di bawah, kami telah menetapkan imej latar belakang untuk elemen div HTML. Dimensi elemen div ialah 500 X 300. Menggunakan sifat saiz latar belakang, kami menetapkan imej latar belakang untuk mempunyai dimensi 200 X 200.

Dalam output, pengguna dapat melihat bahawa saiz imej latar belakang adalah lebih kecil daripada elemen div. Selain itu, kami menggunakan sifat CSS "background-repeat: no-repeat" untuk mengelakkan pengulangan.

<html>
<head>
   <style>
      .div {
         background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
         background-size: 200px 200px;
         width: 500px;
         height: 300px;
         border: 1px solid blue;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h3>Using the background-size CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 2

diterjemahkan sebagai:

Contoh 2

Dalam contoh di bawah, kami menggunakan sifat CSS "saiz latar belakang: penutup" untuk menetapkan saiz imej latar belakang.

Dalam output, kita dapat melihat bahawa imej latar belakang sesuai dengan elemen div. Walau bagaimanapun, apabila kami menetapkan saiz latar belakang kepada penutup, beberapa tepi imej dipotong.

<html>
<head>
   <style>
      .div {
         background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
         background-size: cover;
         width: 500px;
         height: 500px;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh 3

ialah:

Contoh 3

Dalam contoh di bawah, kami menggunakan sifat CSS "saiz latar belakang: contian" untuk menetapkan saiz imej latar belakang.

Dalam output kita dapat melihat bahawa ia menetapkan imej latar belakang tanpa menekan dimensi imej.

<html>
<head>
   <style>
      .div {
         background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
         background-size: contain;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 4

diterjemahkan sebagai:

Contoh 4

Dalam contoh di bawah, kami hanya memberikan nilai lebar atribut 'saiz latar belakang'. Apabila kita hanya menggunakan nilai sebagai sifat 'saiz latar belakang', ia menetapkan ketinggian kepada automatik dan pengguna boleh melihatnya dalam output.

<html>
<head>
   <style>
      .div {
         background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
         background-size: 20rem;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Salin selepas log masuk

Pengguna belajar menggunakan CSS untuk menetapkan saiz imej latar belakang. Kita boleh menetapkan saiz tersuai untuk menetapkan imej latar belakang. Selain itu, kita boleh menetapkan lebar dan ketinggian dimensi latar belakang kepada nilai "auto". Jika pengguna ingin menutup keseluruhan elemen HTML dengan latar belakang, maka "penutup" harus digunakan sebagai nilai atribut saiz latar belakang.

Atas ialah kandungan terperinci Tetapkan saiz imej latar belakang menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!