Различия

Показаны различия между двумя версиями страницы.

--- background-image [2023/09/25 18:03]
tro создано
+++ background-image [2023/09/26 16:59] (текущий)
tro [Радіальний грдієнт]
@@ Строка 1: / Строка 1: @@
 ====== background-image ======
 задає фонове зображення елемента, адреса якого вказується аргументом функції url(). Це може бути як відносний, так і абсолютний шлях.
+===== Фон =====
 Варто відразу задати колір фону та фонове зображення, яке завжди буде розташоване поверх фону. Наприклад, у випадку коли зображення не завантажилося, користувач побачить хоча б колір фону, що виділяється, а не порожнє місце. Це особливо актуально, якщо в блоці є текст, колір якого не контрастує з основним кольором документа.
 <code>
@@ Строка 6: / Строка 7: @@
 	background-color: #2a2a2a;
 	background-image: url(шлях до зображення);
+}
+</code>
+===== Багатошаровий фон =====
+Елементу можна задати кілька фонових зображень одночасно. Достатньо перерахувати їх у властивості background-image через кому. Для кожного зображення також можна задати значення інших властивостей фону, також через кому в кожній властивості. Першим прописуєтся те зображения що повиино буди найближче до глядача. Усі наступні параметри (відступи і т.д.) вказуются у тому ж порядку що й описані у background-image.
+<code>
+background-image: url(шлях до зображення 1), url(шлях до зображення 2);
+background-size: 100px, cover;
+background-position: top right, center;
+background-repeat: repeat-x, no-repeat;
+</code>
+===== Лінійний градієнт =====
+<code>
+background-image: linear-gradient(
+	to bottom,
+	rgba(255, 0, 0, 0.3),
+	rgba(255, 0, 0, 0.3)
+	),
+	url(шлях до зображення);
+</code>
+<code>
+.linear {
+ background-image: linear-gradient (to right bottom,blues, yellow)
+}
+</code>
+Також можна вказати кількіссть пікселів скіольки якого кольору буде
+===== Радіальний грдієнт =====
+Єліптичний
+<code>
+.radial {
+ background-image: radial-gradient (yellow, blues)
+}
+</code>
+Круговий
+<code>
+.radial {
+ background-image: radial-gradient (circle, yellow, blues)
+}
+</code>
+<code>
+.radial {
+ background-image: radial-gradient (circle, yellow, blues)
 }
 </code>