css滤镜灰色影响浮动

html-css06

css滤镜灰色影响浮动,第1张

您是想问css滤镜灰色影响浮动吗?不影响。

acc滤镜将图像中的所有颜色逐渐转换为某种灰色阴影。值为0%对我们的图像没有影响,而值为100%将使它们完全变为灰度。不允许使用负值。

CSS滤镜不是浏览器的插件,也不符合CSS的标准,是微软为了增强浏览器功能而特意开发,并且,整合在IE浏览器中的一类功能的集合。

滤镜效果 功能描述

Alpha 设置不同的透明度变化效果

Blur 建立模糊效果

DropShadow 建立一种偏移的影象轮廓,即投射阴影

FlipH 水平翻转

FlipV 垂直翻转

Glow 为对象的边界增加色彩光效

Gray 将图片以灰度形式显示

Invert 将色彩、饱和度以及亮度值完全反转,类似底片效果

Light 在一个对象上进行灯光投影

Mask 为一个对象建立彩色透明遮罩

Shadow 为对象建立轮廓的影效果

Wave 在X轴和Y轴方向利用正弦波打乱图片

Xray 只显示对象的轮廓

filter 属性定义了元素(通常是img)的可视效果(例如:模糊与饱和度)。

语法:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

使用效果: 查看demo

demo 是我的GitHub主页,当鼠标放在圆形上面的时候,圆形会旋转,这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

而完整卡片又该怎么写呢?

首先是它的 <html>结构:

CSS样式:

圆角背景:

圆形样式:

投影层的样式:

文字的样式:

如此,便可不用一张图,写出这张卡片了。