当前位置:首页 » HTML/CSS

CSS层样式 图片效果

2009-09-10 20:59 本站整理 浏览(5)

图片CSS样式

.imgborder{

filter:shadow(color=gray,direction=90);/*使用滤镜*/

}

图片可能会阴影在内测而无法显示出来可以使用下面代码

<img src="图片地址" width="871" height="531"

style="filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666',

Direction=135, Strength=32)">

.back{

background:url(图片地址)

}

filter:Gray (黑白滤镜)

Xray 图片转为X光效果

FlipH 图片左右相反

FlipV 图片上下相反

invert 负面效果

Mask(color=参数) 遮罩效果

Glow(color=参数,Strength=参数) 图片边缘产生光晕

blur(diection=参数,Strength=参数) 模糊效果

alpha(Opacity=参数,style=参数) 将图片透明化

waver(freq=参数,lightstrength=参数,phase=参数,strength=参数) 波浪效果

图文并茂的效果

直接在<img>设置align="left" 也可以设置图片的浮动位置

float:left; 设置浮动位置

margin:0 8px 8px 0; 属性是用于在一个声明中设置四个外边距的所有属性的简

写属性。

div.img-left p{

这里修改图旁边文字的字体以及一些显示效果

}

--------

给未下载图片增加提示

将一个提示图设置为背景

background:url(提示图地址)

background-repeat 属性设置是否及如何重复背景图像。

鼠标移动过去 图片放大效果

IE 7,8下可以的,IE6不支持 .skyimg:hover

IE6要加一个a

.skyimg{

filter:alpha(opacity=60);

width:180px;

height:auto;

}

.skyimg:hover{

filter:alpha(opacity=100);

width:220px;

height:auto;

}

.skyimg{

filter:alpha(opacity=60);

width:180px;

height:auto;

}

a:hover .skyimg{

filter:alpha(opacity=100);

width:220px;

height:auto;

}