Bagaimana untuk menetapkan gambar dalam css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan dalam reka bentuk web yang boleh digunakan untuk menerangkan rupa dan gaya halaman web. CSS memudahkan untuk menyediakan imej pada halaman web dan mengawal saiz, kedudukan, warna dan sifatnya yang lain. Dalam artikel ini, kami akan meneroka cara untuk menetapkan imej dalam CSS.

Dalam CSS, imej biasanya ditetapkan melalui atribut imej latar belakang. Sifat imej latar belakang digunakan dalam CSS untuk menentukan imej latar belakang sesuatu elemen. Berikut ialah pengisytiharan CSS asas untuk menetapkan imej sebagai latar belakang elemen:

background-image: url("image.jpg");

Dalam pengisytiharan ini, kami menggunakan fungsi url() untuk menentukan URL imej, di mana "image.jpg " ialah nama fail imej yang anda mahu gunakan untuk menetapkan latar belakang.

Jika anda perlu menetapkan saiz imej, anda boleh menggunakan atribut saiz latar belakang. Sebagai contoh, pengisytiharan berikut akan menjadikan imej 200 piksel lebar dan 100 piksel tinggi:

background-size: 200px 100px;

Anda boleh menetapkan saiz latar belakang kepada peratusan tertentu, contohnya, tetapkan saiz latar belakang kepada 50% daripada elemen induk:

background-size: 50%;

Anda juga boleh menggunakan sifat kedudukan latar belakang untuk meletakkan imej pada bahagian tertentu elemen. Sebagai contoh, pengisytiharan berikut akan meletakkan imej di tengah-tengah elemen:

background-position: center;

Anda boleh menetapkan kedudukan latar belakang kepada piksel atau nilai peratusan tertentu, contohnya, untuk mengalihkan imej latar belakang 50 piksel ke kiri:

background-position: left 50px;

Anda juga boleh menggunakan atribut background-repeat untuk menentukan sama ada imej harus berulang di latar belakang elemen. Secara lalai, imej dijubin secara mendatar dan menegak. Pengisytiharan berikut akan menghalang imej daripada berjubin secara mendatar:

background-repeat: no-repeat;

Jika anda ingin menggunakan imej yang berbeza di bahagian halaman web yang berbeza, anda boleh menetapkan gaya ini kepada kelas yang berbeza dan kemudian menambahkannya dalam HTML dokumen Kelas ini digunakan untuk menentukan elemen yang berbeza. Sebagai contoh, pengisytiharan berikut akan menggunakan imej pada elemen dengan nama kelas "header":

.header {
    background-image: url("header.jpg");
    background-size: cover;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
}

Dalam pengisytiharan ini, kami menggunakan kelas CSS bernama "header" dan menggunakan imej latar belakang A daripada "header.jpg" digunakan pada elemen dalam kelas ini. Kami juga menyatakan bahawa imej harus meliputi keseluruhan elemen dan harus diletakkan di tengah-tengah elemen dan tidak boleh berulang secara mendatar.

Ringkasnya, menetapkan imej dalam CSS ialah teknik yang mudah tetapi sangat berguna. Dengan menggunakan sifat seperti imej latar belakang, saiz latar belakang, kedudukan latar belakang dan ulangan latar belakang, kami boleh memanipulasi imej dalam halaman web dengan berkesan. Semoga artikel ini memberi anda pemahaman asas tentang cara imej disediakan dengan CSS, yang boleh anda gunakan dalam reka bentuk web anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gambar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!