Много хора използват CSS, за да коригират текста, да променят шрифта, цвета, размера и др. Но едно нещо, което много хора често забравят, е, че можете да използвате CSS и с изображения.
Промяна на самото изображение
CSS ви позволява да регулирате как изображението се показва на страницата. Това може да бъде наистина полезно за поддържане на вашите страници съвместими. Чрез поставянето на стилове върху всички изображения създавате стандартен вид за вашите изображения. Някои от нещата, които можете да направите:
- Добавете граница или очертаване около изображенията
- Премахнете цветната граница около свързаните изображения
- Регулиране на ширината и / или височината на изображенията
- Добавете капка сянка
- Завъртете изображението
- Променете стиловете, когато изображението се преобърне
Даването на вашето изображение на граница е чудесно място за старт. Но трябва да обмислите нещо повече от границата - да помислите за целия край на изображението си и да коригирате ръбовете и подложките. Изображението с тънка черна граница изглежда добре, но добавянето на някаква подложка между границата и изображението може да изглежда още по-добре.
img { граница: 1px плътно черно; подложка: 5px;}
Добра идея е винаги да свързвате не-декоративни изображения, когато е възможно. Но когато го направите, не забравяйте, че повечето браузъри добавят цветна граница около изображението. Дори ако използвате горния код, за да промените границата, връзката ще отмени това, освен ако не премахнете или промените границата на връзката. За да направите това, трябва да използвате детско правило на CSS, за да премахнете или промените границата около свързаните изображения:
img> a { граница: няма;}
Можете също така да използвате CSS, за да промените или зададете височината и ширината на вашите изображения. Макар че не е добра идея да използвате браузъра, за да коригирате размерите на изображенията поради скоростта на изтегляне, те стават много по-добри при преоразмеряването на изображенията, така че те все още изглеждат добре. И с CSS можете да настроите вашите изображения да бъдат стандартна ширина или височина или дори да зададете размерите да са относителни към контейнера.
Не забравяйте, че при преоразмеряване на изображения, за най-добри резултати, трябва да промените размера само на едно измерение - височината или ширината. Това ще убеди, че изображението запазва своето съотношение, така че не изглежда странно. Задайте другата стойност на Автоматичен или го оставяйте, за да кажете на браузъра да запази съотношението между страните.
img { ширина: 50%; височина: автоматично;}
CSS3 предлага решение на този проблем с новите свойства обектно-добре и обектно-позиция, С тези свойства ще можете да определите точната височина и ширина на изображението и как трябва да се борави с аспектното съотношение. Това може да създаде ефекти върху пощенските кутии около изображенията или изрязването, за да получите изображението, което отговаря на необходимия размер.
Докато CSS3 обектно-добре и обектно-позиция свойствата все още не са широко поддържани, съществуват други CSS3 свойства, които са добре поддържани в повечето съвременни браузъри, които можете да използвате, за да модифицирате вашите изображения. Неща като сянка на заснемане, заоблени ъгли и трансформации за завъртане, изкривяване или преместване на вашите изображения в момента работят в повечето съвременни браузъри. След това можете да използвате CSS преходите, за да направите промените на изображенията, когато се движат, или кликват върху тях, или точно след определен период от време.
Използване на изображения като фон
CSS улеснява създаването на фантазии с вашите изображения. Можете да добавяте фонове към цялата страница или към конкретен елемент. Лесно е да създадете фоново изображение на страницата с фон изображение Имот:
тяло { фон-изображение: url (background.jpg);}
Променете тяло селектор към конкретен елемент на страницата, за да сложите фон само на един елемент.
Друго забавно нещо, което можете да направите с изображенията, е да създадете фоново изображение, което не се придвижва с останалата част от страницата - като воден знак. Просто използвайте стила фоново прикачване: фиксирано; заедно с вашето фоново изображение. Другите опции за вашия фон включват да ги направите плочки само хоризонтално или вертикално с помощта на фон-повторение Имот. пиша background-repeat: repeat-x; да подреждате изображението хоризонтално и background-repeat: повторение-у; към плочките вертикално. И можете да позиционирате вашето фоново изображение с фон-позиция Имот.
И CSS3 добавя още стилове за вашите фонове. Можете да разтегнете изображенията си, така че да се поберат във всякакви размери на фона, или да зададете размера на прозореца с размера на прозореца. Можете да промените позицията и след това да кликнете върху фоновото изображение. Но едно от най-хубавите неща за CSS3 е, че сега можете да слоете множество фонови изображения, за да създадете още по-сложни ефекти.
HTML5 помага на стилните изображения
Най- ФИГУРА елемент в HTML5 трябва да бъде поставен около всички изображения, които могат да стоят сами в документа. Един от начините да се замислим е дали изображението може да се появи в допълнение, тогава то трябва да е вътре ФИГУРА елемент. След това можете да използвате този елемент и FIGCAPTION елемент за добавяне на стилове към вашите изображения.
