59bj.com - 北极网

  • ·
  • ·
  • ·
  • ·
  • ·
  • ·
投递文章 经典文章 网站公告:
搜索:
您的位置网站首页 > 设计学院 > HTML/CSS > 浏览正文

CSS滤镜实现图片翻转

作者:北极网    来源:北极网(整理)    点击数:   更新时间:2008年08月25 【字体:

图片水平翻转

代码:

1、内部插入式

〈head〉〈/head〉之间插入:

style type = text/css〉

.TurnH{filter:FlipH}

/style〉

然后在图片属性代码中加class="TurnH"

注意:在〈head〉与〈/head〉之间插入代码中,TurnH前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:

style=" filter: FlipH"

效果如图1。


图1

特点:通过使用CSS的“FlipH”滤镜,使图片水平翻转。“FlipH”滤镜是CSS的6个无参数滤镜中的一个,可直接使用,在Dreamweaver中可以同有参数的滤镜一样使用。

图片垂直翻转

代码:

1、内部插入式

〈head〉〈/head〉之间插入:

〈style type = text/css〉

.TurnV{filter:FlipV}

〈/style〉

然后再在图片属性代码中加class="TurnV"

注意:在〈head〉与〈/head〉之间插入代码中,TurnV前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:

style="filter:FlipV"

效果如图2。


图2

特点:通过使用CSS的无参数滤镜“FlipV”滤镜,使图片垂直翻转。

Tags:CSS滤镜 CSS滤镜实现图片翻转 CSS技术
责任编辑:北极网

注册投稿

收藏本文到  >>>

  • 上一篇:网站变黑白灰色的4种代码详细讲解
  • 下一篇:没有了
  • 北极网,中国网络之家
    关于我们 - 联系我们 - 广告服务 - 站长工具 - 友情链接 - 网站地图 -网站留言 - 帮助中心