IE заставил нас разработать что -то, что было головной болью в прошлом. Он отличался от других. Он не поддерживал это, и у него было то, что другие не поддерживали. Сегодня я кратко представлю одну из его функций - фильтров.
Фильтры CSS в основном используются для достижения различных специальных эффектов изображений. Он играет очень волшебную роль в создании веб -сайтов. Сайт может быть сделан более красивым через фильтры CSS. В CSS атрибут фильтра представляет значение фильтра, который может устанавливать эффекты фильтра текста, изображений и таблиц.
Синтаксис: style = {Filter: Filtername (fparameter1, fparameter2 ...)}
Примечание. File Entername - это имя фильтра, fparameter1, fparameter2 и т. Д. - параметры фильтра.
13 Эффект фильтра CSS
1. Фильтр: Chroma - Сделайте специальные цвета прозрачными.
Синтаксис: стиль = фильтр: Chroma (цвет = цвет)
Тег: цвет: #rrggbb format, любой.
2. Фильтр: Blur-Create Высокоскоростный эффект движения, то есть эффект размытия.
Синтаксис: Style = Filter: Blur (add = add, направление = направление, прочность = прочность)
Примечание: добавить: обычно 1 или 0; Направление: угол, 0-315 градусов, длина шага составляет 45 градусов; Сила: ценность роста эффекта, обычно 5.
3. Фильтр: Flipv-Create вертикальное зеркальное изображение.
Синтаксис: стиль = фильтр: Flipv
4. Фильтр: альфа-прозрачная иерархия
Синтаксис: стиль = фильтр: альфа (непрозрачность = непрозрачность, finishopacity = finishopacity, style = style, startx = startx, starty = starty, finishx = finishx, finishy = finishy)
Примечание: непрозрачность: начальное значение, значение 0-100, 0 является прозрачным, 100-исходное изображение; FinishOpacity: Целевое значение; Стиль: 1 или 2 или 3; Startx: любое значение; Starty: любое значение
5. Фильтр: Fliph - создать горизонтальное зеркальное изображение.
Синтаксис: стиль = фильтр: Fliph
6. Фильтр: Светь-принести славу вне края близлежащих объектов.
Синтаксис: Style = Filter: Glow (Color = Color, прочность = прочность)
Метка: Цвет: светящийся цвет; Сила: интенсивность (0-100)
7. Фильтр: маска-прозрачная маска на объекте.
Синтаксис: стиль = фильтр: маска (цвет = цвет)
8. Фильтр: Фильтр: рентгеновский завод.
Синтаксис: стиль = фильтр: xray
9. Фильтр: инверт-инверт.
Синтаксис: стиль = фильтр: инвертировать
10. Фильтр: Dropshadow - создает фиксированную тень объекта.
Синтаксис: Style = Filter: Dropshadow (Color = color, offx = offx, OFFY = OFFY, положительный = положительный)
Метка: Цвет: #RRGGBB Формат, произвольный; OFFX: значение отклонения оси X; OFFY: значение отклонения оси Y; Положительный: 1 или 0.
11. Фильтр: Grey-Grays изображение.
Синтаксис: стиль = фильтр: серый
12. Фильтр: волновой эффект.
Синтаксис: фильтр: волна (add = add, freq = freq, lightstrength = сила, фаза = фаза, прочность = прочность)
Примечание: добавить: обычно 1 или 0; FREQ: значение деформации; LIGHTSTRENTION: процент деформации; Фаза: процент деформации угла; Сила: сила деформации.
13. Shadow-Create Offset Isfere Shadow.
Синтаксис: фильтр: тень (цвет = цвет, направление = направление)
Метка: Цвет: #RRGGBB Формат; Направление: угол, 0-315 градусов, размер шага составляет 45 градусов.
При использовании фильтров CSS одна вещь, которую вы должны отметить, заключается в том, что в текущем макете производства веб -сайта фильтры часто прикрепляются к Div. Если вы просто установите идентификатор для Div в HTML -коде, фильтр не будет работать. Этот атрибут ID должен быть определен в стиле или CSS, в противном случае он не будет работать.
Требуется всего лишь одно предложение кода, и изображения можно свободно переключаться, как документы PPT при создании веб -сайта. Это очень просто! Прежде чем преобразовать, нам нужно понять три основных кода:
Вращение: Стиль = Фильтр: Прогид: dximagetransform.microsoft.basicimage (вращение: 1)
Удалить цвет фона: стиль = фильтр: Chroma (Color =#000000)
Установите цвет градиента: стиль = позиция: относительно; слева: 0px; top: 0px; Filter: Progid: dximageTransform.microsoft.Gradient (startColorStr =#ff0000, endColorStr =#ffff00, gradientType = 1)
Замечательный обзор: полная коллекция эффектов фильтра CSS для производства веб -сайтов
Ниже приведена полная коллекция фильтров преобразования изображений, я надеюсь, что это может помочь друзьям ~! ! !
Случайное преобразование: Progid: dximagetransform.microsoft.RevealTrans (anabled = true, переход = 23)
Квадрат становится все меньше: Прогид: dximagetransform.microsoft.iris (irisstyle = square, motion = in)
Квадрат становится больше: Progid: dximagetransform.microsoft.iris (irisstyle = square, motion = out)
Поперечное смазывание: Progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = in)
Cross-Dive: Progid: dximagetransform.microsoft.iris (irisstyle = cross, motion = out)
Звездная форма становится больше: Progid: dximagetransform.microsoft.iris (irisstyle = star, motion = out)
Звездная форма постепенно меньше: Прогид: dximagetransform.microsoft.iris (irisstyle = star, motion = in)
Круг становится больше: Прогид: DximageTransform.microsoft.iris (irisstyle = Circle, Motion = out)
Круг постепенно меньше: Прогид: dximagetransform.microsoft.iris (irisstyle = Circle, Motion = in)
Форма алмаза постепенно меньше: Прогид: dximageTransform.microsoft.iris (Irisstyle = Diamond, Motion = in)
Бриллиант становится больше: Progid: dximagetransform.microsoft.iris (Irisstyle = Diamond, Motion = Out)
Знак плюса становится больше: Прогид: dximagetransform.microsoft.iris (irisstyle = plus, motion = out)
Знак плюса постепенно становится меньше: Прогид: dximagetransform.microsoft.iris (irisstyle = plus, motion = in)
Вверх стирай: протокол: dximagetransform.microsoft.blinds (bands = 1, направление = UP)
Стереть вниз: протокол: dximagetransform.microsoft.blinds (bands = 1, направление = вниз)
Стереть левое: протокол: dximagetransform.microsoft.blinds (полосы = 1, направление = слева)
Стереть вправо: протокол: dximagetransform.microsoft.blinds (полосы = 1, направление = справа)
Втягивание слева и вправо в середине: Прогид: dximagetransform.microsoft.barn (motion = in, ориентация = вертикальная)
Случайное растворение: Progid: dximagetransform.microsoft.randomdissolve (enable = true)
Центральная область расширяется вверх и вниз: Progid: dximagetransform.microsoft.barn (motion = out, ориентация = горизонтальная)
Расширить влево и справа в середине: Прогид: dximagetransform.microsoft.barn (motion = out, orientation = вертикальная)
Случайная горизонтальная линия: progid: dximagetransform.microsoft.randombars (ориентация = горизонталь)
Случайная вертикальная линия: Progid: dximagetransform.microsoft.randombars (ориентация = вертикальная)
Верхняя и нижняя средняя усадка: Прогид: dximagetransform.microsoft.barn (motion = in, ориентация = горизонтальная)
Стандартное преобразование градиента: blendtrans (включено = true, процент = 10)
Регулируемое преобразование градиента: Progid: dximagetransform.microsoft.fade (включено = ture, перекрытие = 1,0)
Вставьте в правой нижней части: протокол: dximageTransform.microsoft.inset (включен = ture)
Скрыть растяжение: progid: dximagetransform.microsoft.stretch (streststyle = hide)
Прогид: dximageTransform.microsoft.strech (streststyle = push)
Ротационное растяжение: PROGID: dximagetransform.microsoft.strech (strectStyle = spin)
Anti-Clock: Progid: dximagetransform.microsoft.radialwipe (Wipestyle = клин)
Радиационные лучи: Прогид: dximagetransform.microsoft.radialwipe (Wipestyle = Radial)
Мозаичный эффект: Прогид: dximagetransform.microsoft.pixelate (maxsquare = 20)
Часы: Прогид: dximageTransform.microsoft.radialwipe (Wipestyle = Clock)
В нижней части слева от лестницы: Прогид: dximageTransform.microsoft.strips (motion = уход)
Вверху справа от лестницы: Прогид: dximagetransform.microsoft.strips (motion = rafeup)
Вверху слева от лестницы: Прогид: dximagetransform.microsoft.strips (motion = Leftup)
Внизу справа от лестницы: Progid: dximageTransform.microsoft.strips (motion = rightdown)
Спиральная усадка: Прогид: dximagetransform.microsoft.spiral (gridsizex = 20, gridsizey = 20)
Вращение ветряной мельницы: Прогид: dximagetransform.microsoft.wheel (спицы = 20)
Z-образные повороты: Progid: dximagetransform.microsoft.zigzag (gridsizex = 20, gridsizey = 20)
ＨBlinds: Progid: dximagetransform.microsoft.blinds (полосы = 6, направление = вниз)
: progid: dximagetransform.microsoft.blinds (bands = 6, направление = UP)
: progid: dximagetransform.microsoft.blinds (полосы = 60, направление = вниз)
: progid: dximagetransform.microsoft.blinds (полосы = 60, направление = UP)
V жалюзи: progid: dximagetransform.microsoft.blinds (полосы = 6, направление = справа)
: progid: dximagetransform.microsoft.blinds (полосы = 6, направление = слева)
: progid: dximagetransform.microsoft.blinds (полосы = 60, направление = справа)
: progid: dximagetransform.microsoft.blinds (полосы = 60, направление = слева)
Переключенный слайд: Progid: dximagetransform.microsoft.slide (Slidestyle = Swap, полосы = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = Swap, полосы = 20)
Push Slide: Progid: dximagetransform.microsoft.Slide (SlideStyle = push, полосы = 1)
: progid: dximagetransform.microsoft.slide (slidestyle = push, полосы = 20)
Скрыть слайд: Прогид: dximagetransform.microsoft.Slide (SlideStyle = Hide, полосы = 1)
: progid: dximagetransform.microsoft.slide (SlideStyle = Hide, полосы = 20)
Нечеткий прогресс: Progid: dximagetransform.microsoft.gradientWipe (Gradientsize = 0,5, Wipestyle = 0, Motion = вперед)
: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0,5, Wipestyle = 0, Motion = обратное)
: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0,5, Wipestyle = 1, Motion = вперед)
: progid: dximagetransform.microsoft.gradientwipe (gradientsize = 0,5, Wipestyle = 1, Motion = обратное)
Вертикальная шахматная доска: Progid: dximageTransform.microsoft.checkerboard (направление = справа, Squaresx = 12, Squaresy = 12)
: progid: dximagetransform.microsoft.checkerboard (направление = слева, Squaresx = 12, Squaresy = 12)
: progid: dximagetransform.microsoft.checkerboard (направление = справа, Squaresx = 2, Squaresy = 2)
: progid: dximagetransform.microsoft.checkerboard (направление = слева, Squaresx = 2, Squaresy = 2)
: progid: dximagetransform.microsoft.checkerboard (направление = справа, Squaresx = 60, Squaresy = 60)
: progid: dximagetransform.microsoft.checkerboard (Направление = слева, Squaresx = 60, Squaresy = 60)
Горизонтальная шахматная доска: Прогид: dximagetransform.microsoft.Checkerboard (Направление = вниз, Squaresx = 12, Squaresy = 12)
: progid: dximagetransform.microsoft.checkerboard (направление = up, squaresx = 12, squaresy = 12)
: progid: dximagetransform.microsoft.checkerboard (направление = вниз, squaresx = 2, squaresy = 2)
: progid: dximagetransform.microsoft.checkerboard (направление = up, squaresx = 2, squaresy = 2)
: progid: dximagetransform.microsoft.checkerboard (направление = вниз, squaresx = 60, squaresy = 60)
: progid: dximagetransform.microsoft.checkerboard (направление = up, squaresx = 60, squaresy = 60)