Може да си мислите, че дизайнът на фона е прост, но CSS има много неясни и мощни свойства, които да научите.
Фоновата тема на вашия уебсайт може значително да повлияе на външния вид и усещането му. Цветовете, изображенията и моделите на фона предизвикват емоция и създават страхотни потребителски изживявания.
Можете да използвате свойствата на фона на CSS, за да зададете стила на фона на HTML елементите. Научете всичко за някои от свойствата на CSS, които можете да използвате, за да създадете отлични фонове.
1. Цвят на фона
The свойството цвят на фона задава цвета на фона на даден елемент. Можете да зададете цвета, като използвате име като "червено", HEX стойност като "#00FF00" или RGB стойност - като "rgb (0, 255, 0)". Можете също да използвате HSL стойност, за да зададете цвета на фона, като използвате нюанс, наситеност и светлота.
Следващият пример задава цвета на фона на цялата страница на оранжево. Всеки от елементите на заглавието получава различен фон.
<тяло>
<h2>Аз съм Зеленh2>
<h3>Аз съм Червенh3>
<h4>Аз съм Синяh4>
тяло>Използвайки CSS, можете да приложите уникален фонов цвят към всеки елемент:
тяло {
Цвят на фона: оранжево;
}h2 {
Цвят на фона: #006600;
}h3 {
Цвят на фона: rgb(128, 0, 0);
}
h4{
Цвят на фона: hsl(240, 100%, 50%);
}
Това ще стилизира страницата да изглежда така:
Можете да използвате свойството opacity, за да определите прозрачността на даден елемент. Непрозрачността приема стойности между 0,0 и 1,0. Колкото по-ниска е стойността, толкова по-прозрачен е елементът.
Като пример, опитайте да зададете непрозрачността на елемент от тялото на 0,5:
тяло {
Цвят на фона: оранжево;
непрозрачност:0.5;
}Това ще се покаже както следва - сравнете цветовете с тези в предишната екранна снимка:
2. фоново изображение
Свойството background-image задава изображение като фон на елемент. Можете да посочите местно изображение или такова от интернет.
<тяло>
<h1>Здравейтетам!h1>
<стр>азиматанизображениевмоязаден план!стр>
тяло>CSS файлът:
тяло {
фоново изображение:url("https://изображения.pexels.com/снимки/1191710/pexels-снимка-1191710.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=1260&ч=750&dpr=1");
}Това ще се покаже така:
Можете също да използвате градиенти на фона за да създадете уникален външен вид за вашето приложение.
3. фоново повторение
Свойството background-image повтаря изображенията по подразбиране. Можете да изберете да повторите изображението хоризонтално по оста x или вертикално по оста y.
Като алтернатива, ако повторението не отговаря на вашия стил, можете да го премахнете, като използвате стойността не-повтаряне.
<тяло>
<h1>Здравей!h1>
<h3>Демонстрирам свойството repeat background-repeat на оста x!h3>
тяло>Използвайте следния CSS, за да приложите повтарящ се фон по оста x:
тяло {
фоново изображение: URL адрес("https://изображения.pexels.com/снимки/459335/pexels-снимка-459335.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=1260&ч=750&dpr=1");
фоново повторение: повторение-x;
}Резултатът:
След това опитайте да повторите изображението по оста y:
тяло {
фоново изображение:url("https://cdn.pixabay.com/снимка/2016/04/18/22/05/миди-1337565__340.jpg");
фоново повторение:repeat-y;
}Резултатът:
Примерът на оста y определено изглежда изкривен. Ако това не са моделите, които търсите, можете да посочите не-повтаряне вместо:
тяло {
фоново изображение:url("https://изображения.pexels.com/снимки/259915/pexels-снимка-259915.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=600");
фоново повторение:не-повтаряне;
}Резултатът:
4. позиция на фона
Свойството background-position определя позицията на фоновото изображение в неговия елемент. Той използва специфични за позиция ключови думи като център, Горна част, и отдолу, или пикселна или процентна стойност.
Добавете свойство за фонова позиция към последното изображение:
тяло {
фоново изображение: URL адрес("https://изображения.pexels.com/снимки/259915/pexels-снимка-259915.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=600");
позиция на фона: Горна частцентър;
}Ще изглежда така:
Можете да видите, че изображението изкривява външния вид на уебсайта. Нека поправим това със следващото свойство.
5. размер на фона
Можете да използвате свойството фоново изображение, за да определите конкретен размер за изображението. Той използва ключови думи като Покрийте и съдържат или пикселна или процентна стойност. Нека поправим изкривеното фоново изображение, като добавим свойство за размер на фона.
тяло {
фоново изображение: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
фоново повторение: без повторение;
позиция на фона: център;Резултатът показва, че изображението вече покрива пропорционално уеб страницата.
6. фон-прикачен файл
Свойството background-attachment определя дали позицията на фоновото изображение остава фиксирана или се превърта. Можете да използвате фиксираните ключови думи или да превъртите.
Нека покажем това в следния код:
<тяло>
<h1>Свойството background-attachmenth1>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
<стр>С фиксираното свойство за прикачване ще забележите, че фонът не се движи с текста.стр>
тяло>CSS файлът:
тяло {
фоново изображение: URL адрес("https://изображения.pexels.com/снимки/96627/pexels-снимка-96627.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=600");
фоново повторение: не-повтаряне;
позиция на фона: център;
размер на фона: Покрийте;
фон-прикачен файл: фиксирани;
}Ако се придвижите надолу по страницата, ще забележите, че фонът не се движи:
За да демонстрирате свойството за прикачен фон на превъртане, променете ключовата дума на превъртане. Ще забележите, че сега фонът се движи заедно с текста.
тяло {
фоново изображение: URL адрес("https://изображения.pexels.com/снимки/96627/pexels-снимка-96627.jpeg?Автоматичен=компресирам&cs=tinysrgb&w=600");
фоново повторение: не-повтаряне;
позиция на фона: център;
размер на фона: Покрийте;
фон-прикачен файл: превъртане;
}7. Свойството на стенописа на фона
Може да забележите, че трябва да включите няколко свойства, за да получите идеалния фон. Това включва писане на много код. Но можете да съкратите кода, като използвате свойството за стенограма на фона.
Свойството за стенограма ви позволява да зададете много свойства на фона в един ред. Използвате ключовата дума заден план за да зададете свойството за стенограма.
Например, вместо да пишете код като този:
тяло {
Цвят на фона: зелено;
фоново изображение: URL адрес("лаптоп3.jpg");
фоново повторение: не-повтаряне;
размер на фона: Покрийте;
фон-прикачен файл: превъртане;
позиция на фона: център;
}Можете да го напишете в един ред, както следва:
тяло {
заден план: зеленоURL адрес("лаптоп3.jpg") не-повтарянеПокрийтепревъртанецентър;
}Съкратеното свойство следва определен ред. Трябва да подравните свойствата в този ред, дори ако едно или повече липсват. Редът е:
- Цвят на фона
- фоново изображение
- фоново повторение
- фон-прикачен файл
- позиция на фона
Можете да създавате интересни дизайни с CSS, като използвате различни фонови модели. С тези модели можете да постигнете уникален и изключителен фон за вашия уебсайт.
Други свойства на фона в CSS
CSS е мощен и можете да направите много с него, за да подправите приложението си. Можете да използвате свойства като background-clip, background-origin и background-blend-mode, за да добавите малко анимация.
Можете също да използвате градиенти и шарки, за да персонализирате страниците си. Експериментирайте със свойствата на фона на CSS, за да изострите уменията си за уеб дизайн.
