CSS Filter背景透明提示

CSS的Filter背景透明提示

*{ margin:0; padding:0;}
body{ margin:0 auto; font-size:12px;}
.model{margin:0 auto; width:30px;}
.model a:hover{ text-decoration:none;}
.model a img{ border:#fff 1px solid;}
.model a:hover img{ border:#888 1px dotted;}
.model a span{ padding:0; display:block; width:80px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;}
.model a:hover span{ color:#fff; background:#000; padding:0; display:block; width:84px; height:54px; margin:-36px 0 0 1px!important; margin:-36px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;}
.model2{margin:0 auto; width:30px;}
.model2 a:hover{ text-decoration:none;}
.model2 a img{ border:#fff 1px solid;}
.model2 a:hover img{ border:#888 1px dotted;}
.model2 a span{ padding:0; display:block; width:180px; height:50px; margin-top:-32px; overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer; text-align:center;}
.model2 a:hover span{ color:#fff; background:#000; padding:0; display:block; width:480px; height:16px; margin:-36px 0 0 1px!important; margin:-20px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60); opacity:.6; text-align:left; text-align:center;}

我可爱吗?

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • CSS Filter背景透明提示

    CSS的Filter背景透明提示 *{ margin:0; padding:0;} body{ margin:0 auto; font-size:12px;} .model{margin:0 auto; width:30px;} .model a:hover{ text-decoration:none;} .model a img{ border:#fff 1px solid;} .model a:hover img{ border:#888 1px dotted;} .model a span

  • 实现png图片和png背景透明(支持多浏览器)的方法

    虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好.使用到的就是:IE5.5+的AlphaImageLoader滤镜. 1.png背景透明 解决办法: 复制代码 代码如下: #div1 { height: 600px; width: 260px; padding: 20px; background-repeat: repeat; } html>body #div1 { background-repeat: repeat;background-image: url(

  • iframe背景透明的设置方法

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent 复制代码 代码如下: <iframe src="./ads_top_tian.html" allowtransparency="

  • JS+CSS实现另类带提示效果的竖向导航菜单

    本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下: <html> <head> <title>带提示的竖向导航菜单</title>

  • 利用jQuery和CSS将背景图片拉伸

    现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起使用jQuery和CSS实现背景图片拉伸效果. 将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本文讨论的是背景图片的拉伸效果.这种效果在一些前卫的页面设计中已经广泛应用,尤其在一些独立页面,像登录页面使用拉伸的背景图片效果比较

  • CSS 渐变背景的6个演示代码

    CSS渐变背景 var setGradient = (function(){ var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function'); var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null; var p_isIE = /*@cc_on!@*/false; try{

  • Vue如何设置el-table背景透明样式

    目录 [前言] [内容] 1.在el-table外加div并自定义class 2.重写css样式 [前言] 一般我们在使用ElementUI组件库的时候,在使用el-table时,背景通常是白色的,但有时候不能满足我们的实际需求,我想让el-table背景变为透明色,下面就来说一下如何实现. [内容] 说明:因为我们通常都是使用ElementUI库的组件,这个组件库是有自己的一套样式的,所以要想实现自己想要的效果,难免要重写样式来实现. 重写样式需要加(>>> 或者 /deep/),不加

  • iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

    底部弹出PopupWindow,背景变为半透明效果,采用两种方式实现 先来看看运行效果图 [方式一]实现从底部弹出PopupWindow 原理:定义一个高度为wrap_content的PopupWindow布局文件,根据屏幕底部的位置显示在Bottom 1.首先定义一个高度为wrap_content的PopupWindow布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:

  • ie7+背景透明文字不透明超级简单的实现方法

    如果你现在还在为背景透明文字不透明而发愁的话,建议你来看看.当然IE6我已经放弃了,所以不要说不用PNG8的图片这样在IE6下没有效果,当然你也可以用滤镜.本人不建议使用滤镜.因为这样可能会出现其它问题!(如无法点击等等问题)做前端最怕的就是BUG,特别是IE6.滚蛋IE6!本文的核心就是利用PNG32透明图片来做背景然后平铺背景就行了.这样就不会存在背景透明文字也透明了.这样做起来超级简单你们说呢!图片只需要调整透明度即可.在PSD中把图片设置为20%的透明度保存为png就行了.(切忌:不要设

  • php实现的css文件背景图片下载器代码

    本文实例讲述了php实现的css文件背景图片下载器代码.分享给大家供大家参考.具体实现方法如下: 下载css文件里面的背景图片是我们这些盗版份子长期搞的事情,下载个css图片下载器常出现各种广告弹窗,实在扛不住.这里就提供了一个php版的css文件背景图片下载器给大家. 把文件放到php程序目录 dos下面 php.exe cssImages.php 0 http://www.xxxx.com/css/style.css \images\ 先在php程序目录建个images文件夹,呵呵,贴代码:

随机推荐