图片变透明文字不透明

css 背景透明文字(内容)不透明三种实现方法

好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明,但背景有一个“透明蒙版”的效果. 平时一般用的方法有三种: ① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片.然后采用填充背景图的方法(repeat),实现背景透明而不影响文字的透明性. 优点:感觉兼容性最好. 缺点:要多弄一张透明图片. 这个就不写样式了.比较简单. ②采用opa

css背景透明文字不透明

测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chrome,IE9+ 文字也跟着透明*/ /* 二.CSS3的rgba */ background: rgba(0, 0, 0, 0.3); /* 兼容浏览器为:firefox,chrome,IE9+ 其中IE8,IE7,IE6解析为背景全透明文字不透明 */ /* 三.IE专属滤镜 */ filter

css实现背景透明文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助以背景黑色,透明度0.5举例非IE:background:rgba(0,0,0,0.5); IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE: filter:progid:DXImageT

CSS3实现背景透明文字不透明

最近遇到一个需求,如下图,input框要有透明效果首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导致文字和字体图标被模糊,如下图于是我开始思考其它方式,最后想到了通过透明背景图来实现背景图虽然能够解决问题,但会造成空div,并且还需要设置定位感觉把简单的事情变得复杂了,我始终认为有更简单的方法最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置 background-col

css3背景透明文字不透明

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

html 背景透明文字不透明

.alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)\9; } :root .alpha{ filter: none; /*for IE9*/ } <

CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明,也就是越小越透明,颜色可以自定义.这样可以让图片上的文字更清淅,在一些图片特效中我们会见到这种效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

Android-加载透明PNG图片变黑的问题

png和jpg作为两种最常用的图片格式,首先我们要知道他们的区别: 1.从一般图片的外观上来说,他们是无法直接判断的 2.从文件大小上来说,同样一张图png肯定比jpg的大 3.通过查资料咱们可以发现,png即可移植网络图形格式,也是一种位图文件存储格式,可以进行无损压缩.而jpg是我们最常见的图片格式了,图片占用存储较少,但是也牺牲了图片质量. 总结为一句话是两者最大的区别是有损和无损. 而出现加载透明png图片变黑的问题,一般情况下这样的: 服务端的图片是透明png的无损图片,我们下载到本地

CxImage透明图片合成和文字叠加

1 CxImage的作用 CxImage将几张图片合成一张图片,在一张底图上添加图片,有些图片是有透明效果的,实现图片之间的透明重叠效果.另外还可以添加文字. (1)背景图片mymix.png (2)角标图片,左下角为透明的,black.png和snap.png (3)字图片1MixImage1.jpg和MixImage2.jpg (4)合成后图片效果图现在的目标就是将(2),(3)中的有透明的图片和不透明的图片合成到背景图片(1)上,实现图片(4)中的效果. 1

CSS实现背景图片透明和文字不透明效果

1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ background: url(http://csssecrets.io/images/tiger.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; content: "&

【原】CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下

CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,

(转)解决png图片在IE6下不透明的方法

来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法思路: 1.一个专门解决png图片无法在IE6正常显示的JS类DD_belatePNG.js, 2.在页面中引入该类,并且指定对那些页面元素起作用 eg:<script>DD_belatePNG.fix('img')</script> 表示对img标签,这里可以写类名代码: DD_belatePNG

CSS实现背景透明而背景上的文字不透明完美解决

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

css如何实现背景透明，文字不透明？

之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果. 使用CSS3新属性rgba. 实现透明的方法: css3的opacity,取值从 0 到 1,如opacity : 0.5,IE9及以上版本和标准浏览器

CSS实现背景透明，文字不透明(兼容所有浏览器)

我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的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专属滤镜

解决css设置背景透明，文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

CSS3实现背景透明，文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

图片变透明文字不透明

热门专题