latar belakang CSS

QQ截图20161011143733.png

Kami akan menerangkan atribut dalam jadual satu persatu melalui dua contoh berikut. Contoh 1: Warna latar belakang

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>PHP中文网</p>
    </body>
</html>

style.css

/*Warna latar belakang ditetapkan kepada merah*/

body{
   background-color: red;
}
 
p{
    width: 150px;
    padding: 10px;
    background-color: #0014ff;
}

Contoh 2: Tetapan Imej latar belakang

Kita perlu meletakkan imej dalam folder projek Dalam contoh kita, kita meletakkan imej bernama python.png Imej ini digunakan untuk rujukan semasa menetapkan imej latar belakang dengan css. Gambarnya adalah seperti berikut:

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <p>PHP中文网</p>
    </body>
</html>

style.css

/ *Letakkan set python .png sebagai imej latar belakang*/

body{
   background-image: url("python.png")
}

Hasil jalankan:

QQ截图20161011144323.png

Anda boleh melihat paparan latar belakang Terdapat banyak imej Python dalam gambar Ini kerana imej latar belakang dipaparkan berulang kali secara lalai. css.css Tambah kandungan berikut

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
}

no-repeat bermakna ia tidak boleh diulang, ulang boleh diulang, repeat-x bermakna paksi-x diulang, repeat-y bermakna paksi-y diulang

Hasil berjalan:

QQ截图20161011144341.png

kedudukan latar belakang digunakan untuk menetapkan kedudukan permulaan imej Contoh berikut meletakkan imej latar belakang dari tengah bahagian atas dalam elemen badan:

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-position:center top;
   /\*大家可以尝试去掉 top 来对比显示效果\*/
}

QQ截图20161011144406.png

Terdapat banyak cara untuk memberikan nilai untuk sifat kedudukan latar belakang. Mula-mula, terdapat beberapa kata kunci yang boleh anda gunakan: atas, bawah, kiri, kanan dan tengah. Biasanya, kata kunci ini akan muncul secara berpasangan, tetapi itu tidak selalu berlaku. Anda juga boleh menggunakan nilai panjang seperti 100px atau 5cm dan akhirnya anda boleh menggunakan nilai peratusan. Jenis nilai yang berbeza mempunyai penempatan imej latar belakang yang sedikit berbeza. Kami tidak akan menghuraikan nilai atribut di sini Jika anda perlu menggunakannya, anda boleh mencarinya di w3school.

Perkaitan latar belakang Jika halaman web agak panjang, maka apabila halaman web itu menatal ke bawah, imej latar belakang juga akan menatal bersamanya. Apabila halaman web ditatal melepasi imej, imej itu hilang. Kita boleh menghalang penatalan ini melalui atribut lampiran latar belakang. Melalui atribut ini, anda boleh mengisytiharkan bahawa imej itu ditetapkan relatif kepada kawasan visual, jadi ia tidak akan terjejas dengan menatal:

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-attachment:fixed;
}

Halang penatalan imej latar belakang Saya percaya anda semua sering melihatnya. terutamanya beberapa pengiklanan yang menjengkelkan.

Kedudukan Latar Belakang

Anda boleh menggunakan atribut kedudukan latar belakang untuk menukar kedudukan imej di latar belakang.

Contoh berikut memusatkan imej latar belakang dalam elemen badan:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

Kata kunci

Kata kunci peletakan imej adalah yang paling mudah difahami dan melakukan apa yang dicadangkan oleh namanya. Sebagai contoh, bahagian atas sebelah kanan meletakkan imej di penjuru kanan sebelah atas kawasan pelapik elemen.

Mengikut spesifikasi, kata kunci kedudukan boleh muncul dalam sebarang susunan, asalkan tidak lebih daripada dua kata kunci - satu sepadan dengan arah mendatar dan satu lagi ke arah menegak.

Jika hanya satu kata kunci yang muncul, kata kunci yang lain dianggap tengah.

Jadi, jika anda mahu imej muncul di atas bahagian tengah setiap perenggan, nyatakan ia seperti ini:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Berikut ialah kata kunci kedudukan yang setara:

QQ截图20161011143855.png

Nilai peratusan

Nilai peratusan dinyatakan dalam cara yang lebih rumit. Katakan anda ingin memusatkan imej dalam elemennya menggunakan nilai peratusan, ini mudah:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Ini akan menyebabkan imej diletakkan dengan betul, dengan pusatnya dijajarkan dengan pusat elemennya. Dalam erti kata lain, nilai peratusan digunakan pada kedua-dua elemen dan imej. Iaitu, titik dalam imej yang digambarkan sebagai 50% 50% (titik tengah) sejajar dengan titik dalam elemen yang digambarkan sebagai 50% 50% (titik tengah).

Jika imej berada pada 0% 0%, sudut kiri atasnya akan diletakkan di sudut kiri atas kawasan padding elemen. Jika kedudukan imej adalah 100% 100% akan meletakkan sudut kanan bawah imej di sudut kanan bawah jidar kanan.

Jadi, jika anda ingin meletakkan imej pada 2/3 secara mendatar dan 1/3 menegak, anda boleh mengisytiharkannya seperti ini:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Jika hanya nilai peratusan yang disediakan, yang disediakan Nilai ini akan digunakan sebagai nilai mendatar dan nilai menegak akan diandaikan sebagai 50%. Ini serupa dengan kata kunci.

Nilai lalai kedudukan latar belakang ialah 0% 0%, yang secara fungsinya bersamaan dengan kiri atas. Ini menerangkan sebab imej latar belakang sentiasa berjubin dari sudut kiri atas kawasan pelapik elemen, melainkan anda menetapkan nilai kedudukan yang berbeza

<html>
<head>
    <style type="text/css">
        body
        {
            background: #ff0000 url("http://img3.imgtn.bdimg.com/it/u=4051126327,266356416&fm=11&gp=0.jpg") no-repeat fixed center;
        }
    </style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<html> <head> <style type="text/css"> body { background: #ff0000 url("http://img3.imgtn.bdimg.com/it/u=4051126327,266356416&fm=11&gp=0.jpg") no-repeat fixed center; } </style> </head> <body> 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

latar belakang CSS

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]