c'est-à-dire filtrer la production de pages collection_HTML/Xhtml_web

IE nous a donné mal à la tête au début du développement. Il est différent. Il ne prend pas en charge ce que d'autres prennent en charge, et il contient également des éléments que d'autres ne prennent pas en charge. Aujourd'hui, je vais présenter brièvement l'une de ses fonctionnalités : les filtres.

　
　Les filtres CSS sont principalement utilisés pour obtenir divers effets spéciaux sur les images. Il joue un rôle très magique dans la production de sites Web. Le site Web peut être rendu plus beau grâce aux filtres CSS. En CSS, l'attribut filter représente le filtre. Il peut définir l'effet de filtre du texte, des images et des tableaux.
Syntaxe : STYLE={"filter:filtername(fparameter1,fparameter2...)>
Remarque : Filtername est le nom du filtre, fparameter1, fparameter2, etc. sont les paramètres du filtre.
13 types de filtres CSS Effet miroir
1. Filtre : chroma - Rendre la couleur spéciale transparente.
Syntaxe : STYLE="filter:Chroma(Color=color)"
Annotation : color:#rrggbb format, n'importe lequel .
2. Filtre : flou - Créez un effet de mouvement à grande vitesse, c'est-à-dire un effet de flou
Syntaxe : STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
Annotation : Ajouter : Généralement 1, ou 0 ; Direction : Angle, 0-315 degrés, le pas est de 45 degrés ; Force : La valeur de la croissance de l'effet, généralement 5 est suffisante
3. Filtre : FlipV. --Créer une image miroir verticale.
Syntaxe : STYLE="filter:FlipV"
4. Filtre : alpha--Définir le niveau de transparence
Syntaxe : STYLE="filter:Alpha(Opacity=opacity,FinishOpacity =finishopacity,Style=style ,StartX = startX, StartY = startY, FinishX = finish Style : 1 ou 2 ou 3 ; StartX : n'importe quelle valeur ; StartY : n'importe quelle valeur
5. Filtre : FlipH - Créez une image miroir horizontale.
Syntaxe : STYLE="filter:FlipH"
6. Filter:glow - Ajoute une lueur à l'extérieur des objets à proximité.
Syntaxe : STYLE="filter:Glow(Color=color,Strength=strength )"
Annotation : Couleur : couleur lumineuse ; Force : intensité (0-100)
7. Filtre : masque - Créez un masque transparent sur l'objet.
Syntaxe : STYLE="filter:Mask( Color=color)"
8. Filtre : Filtre : Xray - donne l'impression que l'objet est éclairé par des rayons X.
Syntaxe : STYLE="filter: :Invert"
10. Filtre : DropShadow -- Crée une ombre fixe de l'objet.
Syntaxe : STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"
Marquage : Couleur : format #rrggbb , any ; Offx : valeur d'écart sur l'axe X ; Offy : valeur d'écart sur l'axe Y ; Positif : 1 ou 0.
11. Filtre : gris - transforme l'image en niveaux de gris.
Syntaxe : STYLE="filtre :Gray"
12. Filtre : vague - effet d'entraînement.
Syntaxe : filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase, Strength=strength)
Annotation : Ajouter : Généralement 1, ou 0 ; Freq : valeur de déformation ; LightStrength : pourcentage de déformation ; Phase : pourcentage de déformation angulaire ; Force : force de déformation.
13.shadow - Créer un décalage Ombre fixe.
Syntaxe : filtre : Ombre ( Color=color,Direction=direction)
Annotation : Couleur : format #rrggbb ; Direction : angle, 0-315 degrés, la taille du pas est de 45 degrés.
Une chose à laquelle vous devez faire attention lorsque vous utilisez des filtres CSS est que dans les mises en page actuelles des sites Web, les filtres sont souvent attachés aux divs. Si vous définissez simplement un identifiant pour le div dans le code HTML, le filtre ne sera pas efficace, cet attribut id doit être défini en style ou en CSS, sinon il ne le sera pas. travail.

Une seule phrase de code est nécessaire, et lors de la création du site Web, les images peuvent être changées librement comme un document PPT. Avant la conversion, nous devons comprendre trois codes de base :
Rotation : style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Supprimer la couleur d'arrière-plan : style="filter:Chroma( Color= #000000)"
Définir la couleur du dégradé : style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType= 1) "
Merveilleuse revue : une collection d'effets de filtre CSS pour la production de sites Web
Ce qui suit est une collection de filtres de conversion d'image, j'espère que cela pourra aider les amis ~ ! ! !
Transformation aléatoire : progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Dégradé carré : progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Dégradé carré Grand : progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)
Croix de plus en plus petite : progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Croix de plus en plus grande : progid : DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
La forme de l'étoile s'agrandit : progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
La forme de l'étoile devient plus petite : progid:DXImageTransform . Microsoft.Iris(irisstyle=star,motion=in)
Le cercle s'agrandit : progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
Le cercle s'agrandit : progid:DXImageTransform.Microsoft. . Iris(irisstyle=circle,motion=in)
Le diamant devient plus petit : progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
Le diamant devient plus grand : progid:DXImageTransform.Microsoft.Iris (irisstyle= diamond,motion=out)
Le signe plus s'agrandit : progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
Le signe plus devient plus petit : progid:DXImageTransform.Microsoft.Iris (irisstyle=plus, motion=in)
　Effacement vers le haut : progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
　Effacement vers le bas : progid:DXImageTransform.Microsoft.Blinds(bands=1,direction =down )
　Effacement vers la gauche : progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
　Effacement vers la droite : progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right )
Réduire les parties centrales gauche et droite : progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Dissoudre aléatoirement : progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
Agrandir la partie centrale de haut en bas : progid:DXImageTransform .Microsoft.Barn(motion=out,orientation=horizontal)
Développez à gauche et à droite au milieu : progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
Lignes horizontales aléatoires : progid:DXImageTransform.Microsoft.RandomBars( orientation=horizontal)
Lignes verticales aléatoires : progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
Rétrécissement moyen supérieur et inférieur : progid:DXImageTransform .Microsoft.Barn(motion=in, orientation=horizontal)
Transformation de dégradé standard : BlendTrans(enabled=true,percent=10)
Transformation de dégradé réglable : progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap =1.0)
Insérer en bas à droite : progid:DXImageTransform.Microsoft .Inset(enabled=ture)
Masquer l'étirement : progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Push stretch : progid : DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Étirement de la rotation : progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Compteur d'horloge : progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
Rayonnement rayon : progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial) Effet mosaïque : progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Horloge : progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
Échelle en bas à gauche : progid:DXImageTransform.Microsoft.Strips(motion=leftdown )
Le coin supérieur droit de l'échelle : progid:DXImageTransform.Microsoft.Strips(motion=rightup)
Le coin supérieur gauche de l'échelle : progid:DXImageTransform.Microsoft.Strips(motion=leftup)
Le coin inférieur droit de l'échelle : progid:DXImageTransform.Microsoft Strips(motion=rightdown)
Retrait en spirale : progid:DXImageTransform.Microsoft.Spiral(gridSizeX= 20,gridSizeY=20)
Rotation du moulin à vent : progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Zigzag : progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
Stores H : progid:DXImageTransform.Microsoft.Blinds(bands=6, direction=down)
: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)
　：progid:DXImageTransform.Microsoft.Blinds(bands. =60,direction=down)
　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction= up)
　V stores : progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
　：progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)
　　：progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)
　　交换式幻灯片：progid:DXImageTransform.Microsoft .Slide(slidestyle=swap,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
　　推动式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=push ,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)
　　隐藏式幻灯片：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
　　：progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)
　　模糊推进：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
　　：progid :DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)
　　：progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)
　　：progid:DXImageTransform .Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)
　　纵向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
　　：progid:DXImageTransform .Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft .Checkerboard(direction=left,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard (direction=gauche,squaresX=60,squaresY=60)
　　横向棋盘：progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.CheckerBoard (direction=up,squaresX=12,squaresY=12)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction =up,squaresX=2,squaresY=2)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)
　　：progid:DXImageTransform.Microsoft.Checkerboard(direction=up ,carrésX=60,carrésY=60)