IE6和部分IE7内核的浏览器会读懂rgbaIE专属滤镜 filter:Alpha的兼容处理背景透明,文字不透明全兼容方案测试浏览器:VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0如何实现背景透明,文字不透明,兼容所有浏览器?我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例:打开ps,在图层面板上,可...
<style type="text/css"> <!-- .clarity { filter: Alpha(Opacity=25, FinishOpacity=100, Style=3, StartX=0, StartY=1, FinishX=1024, FinishY=768); } --> </style>首先在你的网页中建立一个样式,然后在把这个样式用在你的图片上。至于代码的意思请往下看!!! 也许你已经注意到了Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)这一段代码,里面有很多问号,这需要我们去用参数来代...
刚开始出现的错误,内容会受到背景透明度改变的影响:如图:代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width:300px;height: 300px;margin: 50px auto;line-height: 300px;text-align: center;background: red;color: #000;font-size: 30px;-webkit-opacity: 0.2;}</style></head><body><div class=“wrap”>我爱夏天</div></body></html>解决方法一: 在div.wrap内...
CSS文件里设置例如以下就可以filter:alpha(opacity=60); //支持IE
opacity:0.6; //支持Chrome。Firefox原文:http://www.cnblogs.com/llguanli/p/7039885.html
1、HTML 元素透明 其实本身,CSS 实现元素透明是件容易事儿。直接上代码:?1opacity:.5opacity 指的是不透明度,取值为
0~1 之间,1 表示完全不透明,0
表示完全透明。A
级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事。不过 IE
有滤镜,可以帮助我们拐弯抹角地搞定不透明度:?1filter:alpha(opacity=50);注:事实上会碰到透明背景层,而
opacity
属性是会继承的,避免这个问题,需要结合定位来实现。在 CSS3 中,...
今天分享前端代码主题:jequery控制css图片透明度很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性。如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制。第一种使用:hover伪类选择器,本示例使用第二种。先看最后效果:第一步:放置图片 <ul id="test"> <li> <img class="imgopacity...
http://www.divcss5.com/css-hack/c574.shtml.div{ filter:alpha(Opacity=70); -moz-opacity:0.7; opacity: 0.7;}原文:http://www.cnblogs.com/kttbk/p/7686888.html
项目的需要,需要一个背景半透明的效果,于是马上想到“opacity:0.5″等等,为兼容IE可能还会用到filter,如:filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;上面的是可以达到半透明的效果,但是会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这不是我想要的如下,实现了可以兼容各浏览器,达到背景颜色半透明而不影响子元素的代码:background:rgba(0,0,0,0.6)background: transparent\9;zoom:1\8;/* requ...
?背景透明文字不透明<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景透明,文字不透明</title><style>* {padding: 0;margin: 0;}body {padding: 50px;background: url(1.jpg) 0 0 repeat;}.demo {padding: 25px;background-color: rgba(0, 0, 0, 0.5); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */}.demo p {color: #FFFFFF;}@media \0screen\,screen\9 {/* 只支持IE6、7、8 */.demo {bac...
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情。目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效。 这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。 关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标...
在div属性中添加:filter:alpha(Opacity=90);-moz-opacity:0.7;opacity: 0.7;但注意,添加之后,其子层会跟随父层的透明,导致效果很差。应该分开层次,不用继承的方式 属性说明:Alpha:设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围...
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3:透明度</title><style type="text/css">div{width:100px;height:100px;margin: 40px;display: inline-block;background-color: #ee3e80;}p{width: 100px;height: 100px;position: relative;top: 20px;left: 20px;margin:20px;}p.one {background-color: rgb(0,0,0);opacity: 0.5;}p.two {background-color: rgb(0,0,0);background-color: rgba(0,0,0,0....
效果如图。Ps、背景线条是背景图勒,和本文效果无关。。。 html代码如下: 复制代码代码如下:<div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"><!--其他内容--></div> </div> 有两种实现方式: 1.box-reflect (属性详情见http://css.doyoe.com/ 属性→边框→box-reflect) 复制代码代码如下:.content h3{ opacity:0.7; font:40px/50px ‘Microsoft yahei‘; -webkit-box-reflect: below 5px -webkit-gr...
例子:<div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px;opacity:0.5;background-color:silver;color:red">何问起<a href="http://hovertree.com/hvtart/bjae/q3etb2qv.htm" target="_blank">效果</a></div>查看效果:http://hovertree.com/hvtart/bjae/q3etb2qv.htm 设置 div 元素的不透明级别:div{opacity:0.5;}opacity 属性设置元素的不透明级别。默认值: 1继承性: no版本: CSS3JavaScript ...
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. 复制代码代码如下:.box { /* 首先定义要使用的4幅图像为背景图 */ backgrou...