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.
- Hozzon létre egy mappát a projekt fájljaihoz.
- 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.
- Hozzon létre egy stílusok.css fájlt a CSS -hez.
- 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éldaA 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
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 IIIIratkozzon 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