Ето резултатите от тази статия:
Да започваме!
Променете цвета на изображението в CSS
За да промените цвета на изображението в CSS, първо научете за свойството филтър и неговите функции. По този начин ще получите по-добро разбиране.
филтър CSS Property
За контролиране на визуалния ефект на изображението се използва филтърно свойство на CSS. Визуалните ефекти са:
- размазване
- яркост
- настройка на цвета
- падаща сянка
- непрозрачност
Синтаксис на свойство на филтъра
Синтаксисът на свойството филтър е:
филтър : размазване ( ) | падаща сянка ( ) | непрозрачност ( )- размазване (): използва се за прилагане на ефект на размазване върху изображението.
- падаща сянка(): създаване на сянка върху изображение.
- непрозрачност (): използва се за добавяне на прозрачност към изображението.
Можем да използваме множество филтри, използвайки това свойство на филтъра. Тази статия е за това как да промените цвета на изображението, така че тук ще обясним как да използвате функциите drop-shadow() и opacity() с него.
падаща сянка()
drop-shadow() е вградена функция на CSS, която позволява задаване на сянка на всеки елемент или изображение. Следните параметри се използват във функцията drop-shadow() за промяна на цвета на изображение:
- отместване-x: Използва се за добавяне на хоризонтална сянка.
- отместване-y: Сенките се добавят вертикално с помощта на това.
- цвят: С този параметър се оцветяват сенките.
За да изясним тези точки, нека преминем към синтаксиса на падащата сянка:
падаща сянка ( цвят offset-x offset-y )- offset-x и offset-y могат да бъдат положителни или отрицателни.
- При хоризонтално положителната стойност се използва за добавяне на ефектите от дясната страна, а отрицателната е за лявата страна.
- При вертикално положителната стойност е за долната страна, а отрицателната е за горната.
- На мястото на цвета можете да зададете всеки цвят, който искате да придадете на изображението.
непрозрачност ()
opacity() се използва за добавяне на прозрачност към елемент или всяко изображение. Синтаксисът на opacity() е:
непрозрачност ( номер ) ;Тук “ номер ” аз s се използва за задаване на ниво на непрозрачност между 0,0 до 1,0. За да направите изображение напълно прозрачно, можете да го зададете като 0.0.
За да изясним гореспоменатите точки, нека преминем към примера.
Как да променя цвета на изображението в CSS?
В примера по-долу първо ще добавим изображение с помощта на таг:
< img клас = 'образ' src = 'image.jpg' всичко = '' >
< / тяло >
Преди да приложите свойството филтър, резултатът беше следният:
За да промените цвета на изображение, нека преминем към CSS и да приложим свойството филтър към него. Ще зададем непрозрачност на 0,5 за прозрачност на изображението. Във функцията drop-shadow() стойността на offset-x и offset-y е 0, защото искаме да променим само цвета на изображението.
.образ {филтър : непрозрачност ( 0,5 ) падаща сянка ( 0 0 кафяво ) ;
}
Ето и крайния резултат след внедряването:
Цветът на изображението е променен успешно.
Заключение
За да промените цвета на изображение, две CSS функции: opacity() и drop-shadow() се използват със свойството филтър. opacity() определя прозрачността на изображението, а drop-shadow() присвоява цвят и сянка на изображението. Тази статия обяснява метода за промяна на цвета на изображение с помощта на CSS.