Rumah  >  Artikel  >  hujung hadapan web  >  tetapan css kembali

tetapan css kembali

PHPz
PHPzasal
2023-05-29 09:09:37418semak imbas

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mentakrifkan gaya halaman web. Ia boleh digunakan untuk mengawal persembahan halaman web, termasuk fon, saiz, warna dan reka letak. CSS adalah bahagian yang sangat penting semasa membina laman web. Untuk menjadikan tapak web anda kelihatan cantik, anda perlu menguasai beberapa teknik dan tetapan CSS. Dalam artikel ini, kami akan merangkumi beberapa tetapan latar belakang CSS untuk membantu anda mempunyai lebih kawalan ke atas latar belakang tapak web anda.

  1. Tetapkan warna latar belakang

Menetapkan warna latar belakang tapak web adalah langkah yang sangat penting. Anda boleh menetapkan warna latar belakang tapak web anda menggunakan kod berikut:

body {
  background-color: #CCC;
}

Di sini, body ialah pemilih untuk elemen badan HTML. background-color ialah sifat CSS dan #CCC ialah nilai warna yang diwakili oleh kod perenambelasan. Anda boleh menukar warna latar belakang dengan menukar nilai #CCC. Anda juga boleh menetapkan warna latar belakang menggunakan nama warna atau nilai RGBA.

  1. Tetapkan imej latar belakang

Jika anda ingin menambah imej latar belakang pada tapak web anda, anda boleh menggunakan kod berikut:

body {
  background-image: url("background-image.jpg");
}

di sini, background-image Hartanah menetapkan latar belakang tapak web kepada imej yang ditentukan. Anda boleh menggantikan nilai atribut url dengan alamat URL imej yang anda mahu gunakan. Selain itu, anda boleh menggunakan atribut lain untuk melaraskan cara imej latar belakang muncul, seperti background-repeat, background-position dan background-size.

  1. Ulang imej latar belakang

Jika anda mahu imej latar belakang berulang dalam tapak web, anda boleh menggunakan kod berikut:

body {
  background-image: url("background-image.jpg");
  background-repeat: repeat;
}

Di sini, akan ditetapkan kepada background-repeat. Ini bermakna imej latar belakang akan berulang secara menegak dan mendatar. Anda juga boleh menggunakan atribut repeat atau repeat-x untuk mengulang imej latar belakang secara mendatar atau menegak sahaja. repeat-y

    Jangan ulangi imej latar belakang
Jika anda tidak mahu imej latar belakang anda berulang, anda boleh menggunakan kod berikut:

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

Di sini, ditetapkan kepada

, yang akan menjadikan imej latar belakang muncul sekali sahaja. Ini biasanya berfungsi untuk tapak dengan imej besar yang tidak berjubin tetapi jubin berulang boleh menjadikan tapak kelihatan bersepah. background-repeatno-repeat

Imej latar belakang tetap
  1. Jika anda mahu imej latar belakang kekal tetap semasa menatal halaman, anda boleh menggunakan kod berikut:
body {
  background-image: url("background-image.jpg");
  background-attachment: fixed;
}

Di sini , atribut

ditetapkan kepada

, yang akan memastikan imej tidak bergerak semasa halaman menatal. Ini biasanya sesuai untuk tapak web yang perlu menyimpan imej tetap di bahagian bawah halaman. background-attachmentfixed

Kecerunan warna latar belakang
  1. Jika anda ingin menambah latar belakang kecerunan pada tapak web anda, anda boleh menggunakan kod berikut:
body {
  background: linear-gradient(to bottom, #FFF, #000);
}

Di sini, Fungsi

Cipta kecerunan antara dua warna. Anda boleh menukar nilai warna dalam fungsi untuk mencipta kesan kecerunan yang berbeza. Atribut

menentukan arah kecerunan dari atas ke bawah. linear-gradient()to bottomIni ialah beberapa tetapan latar belakang biasa dalam CSS. Dengan menguasai kemahiran ini, anda boleh menjadikan laman web anda kelihatan lebih profesional dan menarik. Sudah tentu, ini hanyalah puncak gunung es apabila ia datang kepada tetapan latar belakang CSS Terdapat banyak lagi teknik lanjutan yang boleh menjadikan laman web anda lebih sejuk. Dengan pembelajaran dan amalan berterusan, anda akan menjadi lebih mahir dan mencipta laman web yang benar-benar cantik.

Atas ialah kandungan terperinci tetapan css kembali. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:css menetapkan saiz fonArtikel seterusnya:css menetapkan saiz fon