Hogyan lehet megváltoztatni a háttérszínt CSS használatával

Hogyan lehet megváltoztatni a háttérszínt CSS használatával

Minden kezdő front-end fejlesztői karrier egyik legizgalmasabb pillanata, ha megtanulja megváltoztatni a weboldal háttérszínét.





A HTML -vel való munka nagyszerű és minden, de csak néhány sor CSS segítségével életre keltheti oldalait és programozási útját.





Ez az útmutató mindent tartalmaz, amit a háttérszín CSS használatával történő megváltoztatásáról tudni kell.





Beállítás

Dobjunk ki egy kis előmunkát.

hogyan lehet képernyőképet készíteni pillanatok alatt anélkül, hogy tudnák

jegyzet : Javaslom a használatát Visual Studio kód a ... val Élő szerver bővítmény a valós idejű változások megtekintéséhez a HTML és a CSS frissítésekor.



  1. Hozzon létre egy mappát a projekt fájljaihoz.
  2. Hozzon létre egy index.html fájlt a HTML tárolására. Használhatja a kazánlemez kódját, vagy csak beállíthat néhányat , , és címkék.
  3. Hozzon létre egy stílusok.css fájlt a CSS -hez.
  4. Helyezze össze a CSS -fájlt a HTML -kóddal benne címkék.

Most már készen áll a CSS szerkesztésére.

Összefüggő: Boilerplate webhely létrehozása





Hogyan lehet megváltoztatni a háttérszínt CSS használatával

A háttérszín megváltoztatásának legegyszerűbb módja a test címke. Ezután szerkessze a háttérszín ingatlan. A színkódokat a Google Color Picker böngészőbővítmény keresésével és használatával találhatja meg

body {
background-color: rgb(191, 214, 255);
}

Ez a kód szép világoskékre változtatja a hátteret.





Az háttérszín Az ingatlan hat különböző formában fogadja el a színeket:

  • név : fénykék; (közeli közelítéshez)
  • hexadecimális kód : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); ahol nak nek alfa (átlátszatlanság)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); ahol nak nek alfa (átlátszatlanság)

Használja a gyorsírást háttér helyén ingatlan háttérszín extra kód vágásához. Ezzel a módszerrel megváltoztathatja bármely HTML elem háttérszínét.

Hozzon létre egy elemet, és osztályt ad neki - ebben az esetben az osztály az panel . Állítsa be magasság és szélesség tulajdonságok a CSS -ben. Válassza ki az elemet a CSS -ben, és távolítsa el a színt.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Itt láthatja a test háttér tulajdonság stílusától függetlenül .panel háttér ingatlan.

A háttértulajdonság színátmeneteket is elfogad:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Hogyan lehet megváltoztatni a háttérképet a CSS -ben

Mi a teendő, ha azt szeretné, hogy a háttér kép, ne pedig egyszínű vagy színátmenet legyen? A gyorsírás háttér tulajdon ismerős barát.

Győződjön meg arról, hogy a kép ugyanabban a mappában van, mint a HTML- és CSS -fájlok. Ellenkező esetben a zárójelben lévő fájl elérési útját kell használnia a név helyett:

body {
background: url(leaves-and-trees.jpg)
}

Hú! Úgy tűnik, a kép túl nagyítva van. Ezt a háttérméret ingatlan.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

A gyorsírás használatához háttér ingatlan együtt a háttérméret ingatlan borító , azt is meg kell adnia háttér-pozíció tulajdonságait, és az értékeket fordított perjellel válassza el (még akkor is, ha alapértelmezett pozícióértékek, mint pl bal felső .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Nesze! Megfelelő méretű háttérkép a CSS egyik sorában.

Olvass tovább: Háttérkép beállítása a CSS -ben

jegyzet : Óvakodjon a nagyméretű, sok tárhelyet elfoglaló háttérképektől. Ezeket nehéz lehet betölteni mobilon, ahol két másodperce van arra, hogy a felhasználók okot adjanak arra, hogy az oldalon maradjanak.

Fel a CSS játék CSS box-shadow

Egy önálló fejlesztő számára a háttérszín és a háttérkép tulajdonságai régi hírek. Szerencsére mindig van mit tanulni.

Próbáljon lendületet adni dobozainak a CSS box-shadow segítségével. A HTML -elemek soha nem néztek ki jobban!

Részvény Részvény Csipog Email A CSS box-shadow használata: 13 trükk és példa

A nyálas dobozok unalmasnak tűnnek. Ragyogd fel őket a CSS doboz-árnyék hatásával!

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • Webfejlesztés
  • Web Design
  • CSS
A szerzőről Marcus Mears III(26 cikk megjelent)

Marcus egy életen át tartó technológiai rajongó és a MUO írószerkesztője. 2020 -ban kezdett szabadúszó írói karrierjébe, felkapva a trendi technikát, modulokat, alkalmazásokat és szoftvereket. A főiskolán informatikát tanult, elsősorban a webes webes fejlesztésekre összpontosítva.

Továbbiak Marcus Mears III

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide