自己做的小例子 第一个 1 2 3 4 5 6 7 *{margin:0;padding:0} 8 .container{width:200px; height:200px;background:red; padding:10px;} 9 .content{width:50px; height:50px;border:1px solid hsla(0,0%,100%,.5);background:#fff;border-radius: 1px;background-clip: padding-box;}10 11 12 13 14 15 16 17 18 第二个 1 2 3 4 5 6 ...
CSS如何设置div背景透明度且兼容性良好: 建议:尽可能的手写代码，可以有效的提高学习效率和深度。 设置对象的透明度在很多网页特效中都有实用，设置对象的透明度并不难，唯一的难点可能就是如何兼容各大主流浏览器，下面就简单介绍一下如何实现此效果。代码实例如下: 蚂蚁部落 *{ margin:0px; padding:0px; } .opacity{ width:150px; height:150px; background-color:green; filter:alpha(opacity=50); -...
如何利用CSS实现图片的透明效果:建议:尽可能的手写代码，可以有效的提高学习效率和深度。在网页的实际应用中，往往需要设置图片的透明度，下面就简单介绍一下如何实现此效果。代码实例如下: 蚂蚁部落.first image{ filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;} 以上代码实现图片的透明度效果，大家也可以参阅CSS如何设置div背景透明度且兼容性良好一章节了解更多相关透明度的内容
CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有： grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数 saturate 饱和度 值为num hue-rotate 色...
项目中经常有遇到需求半透明的情况，如图片、文字、容器、背景等等，每次都要去翻以前的项目，不甚其烦。现在一次性做个小结，方便自己查阅，也同时分享给大家： 一、 元素容器透明 1 .div{2 opacity: 0.5; /* Firefox、Chorme、Opera等主流浏览器识别 */3 filter:alpha(opacity=50); /* IE6及以上IE浏览器识别 */4 } 说明： 1. opacity:* 取值0-1之间，由全透明向不透明递增，超过1之后默认不透明； 2...
如何实现背景透明，文字不透明，兼容所有浏览器？ 我们平时调整的不透明度如图所示： 实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法： css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8) IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80) css的opacity 兼容...
super胡 img{ /*-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);IE专属 */filter:alpha(opacity=50);/*IE*/-moz-opacity:0.5;/*firefox*/opacity: 0.5;/*chrome*/ } 需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面
今天分享前端代码主题：jequery控制css图片透明度很多时候在网站图片处理上需要实现一些辅助效果，比如鼠标在图片上滑动时或点击时改变图片颜色（变灰或者其他），其实一个简单的办法就是改变图片css透明度属性。如何改变呢？一种是纯css，一种使用jquery或者javascript代码控制。第一种使用:hover伪类选择器，本示例使用第二种。先看最后效果：第一步：放置图片 ...
例子： 何问起效果 查看效果：http://hovertree.com/hvtart/bjae/q3etb2qv.htm 设置 div 元素的不透明级别：div{opacity:0.5;}opacity 属性设置元素的不透明级别。默认值： 1继承性： no版本： CSS3JavaScript 语法： object.style.opacity=0.5value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 inherit 应该从父元素继承 opacity 属性的值。 博客园 roucheng js,jquery,css,ht...
一个老生常谈的问题就是ie6不支持透明png图片啊。但其实ie6只是不支持png-24格式的透明背景图片，但对透明背景的png-8图片还是支持的，只是png-8图片只有256色，放到任意浏览器都会呈现白色的锯齿。 当代码这样时： .gif{ width: 400px; height:200px; background:#f00 url(png8.png) no-repeat; } div中的背景图片是下图的透明背景png-8图片： 浏览器打开的效果如下（chrome，firefox，ie6+都是这...
CSS如何设置div半透明效果:设置元素的透明度在很多应用中都有使用，下面就介绍一下如何设置一个元素为半透明，其他的透明效果自己衍伸就可以了。代码实例如下: 蚂蚁部落div{ filter:alpha(opacity=50); opacity:0.5; width:100px; height:100px; background-color:green;} opacity属性所以标准浏览器都支持，但是IE8和IE8以下浏览器不支持此属性，于是就使用filter:alpha(opacity=50)进行...
首先要说明的是背景是内容的祖先元素。如果是兄弟节点那就没有必要记录这篇文章了。 记录一下，知其然也知其所以然。 IE8-特点： 1.不支持"opcity:0.5;"这种写法，只支持"filter:alpha(opacity=50)"。 2.如果背景元素拥有css属性设置了z-index的值（除默认值auto外),则内容会随着背景元素一起半透明 3.如果背景元素的内容元素本身或其祖先节点（这些祖先节点是背景元素的后代节点）没有设置css定位...
适逢元旦假期，妹子逛街吃火锅看电影陪女朋友之际，像风一样的写完了这篇文章！文章画风略微粗糙，但是这个动画的实现还是很费了一番脑子的，话说程序猿之间交流并不需要过多解释，上代码就搞定。 首先说一下我们这个要实现的圆环进度动画，有三个特点： 1、背景是透明的，所以用遮挡实现的方法就不用考虑了； 2、圆环颜色是有透明度的，所以用两个半圆环实现大于180度的圆环效果不能有叠加部分； 3、最好用纯css3简洁的实现。 ...
CSS如何实现div的透明效果:在通常情况下设置div的透明度可以使用以下代码： filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 以上代码可以将div设置为半透明，但是遗憾的是，IE6浏览器并不支持opacity属性。 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12681 更多内容可以参阅:http://www.softwhy.com/divcss/
css设置元素透明度代码实例:本章节介绍一下如何设置一个元素的透明度，现在众多的效果都有使用，下面就介绍一下如何实现此效果。w3c提供了一种标准的设置透明度的属性opacity，此属性值大小是介于0-1之间的，0为完全透明，1为完全不透明。代码如下: 蚂蚁部落div{ width:100px; height:100px; background:red; opacity:0.3;} 以上代码在谷歌和火狐浏览器中能够完美执行，但是在IE8和IE8以下浏览器...