css实现单色或图片背景透明,而文字不透明的方法

一.单色背景
方法: 不使用opacity属性,而是使用rgba
例子:

<style>.bg {background-color:rgba(0,0,0,0.4)}
</style><div class="bg">背景是透明度0.4的黑色，文字不透明</div>

效果:

二.图片做背景
方法1: 将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上
例子:

<style>.bg-box {position:fixed;top: 0;}.bg {position:absolute; background:url('图片地址') no-repeat;height:100px; width:400px; opacity:0.4}.font-text {position:absolute; height:100px; width:400px;}
</style><div class="bg-box"><div class="bg"></div><div class="font-text">背景是透明度0.4的图片，文字不透明</div>
</div>

效果:

方法2: 这个可以说不属于css的范围,只要叫你的ui把图片导出为半透明的就行了…

css实现单色或图片背景透明,而文字不透明的方法相关推荐

html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
css如何实现背景透明，文字不透明？
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: 为元素添 ...
CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
css如何实现背景透明，文字不透明
css如何实现背景透明,文字不透明? 之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景 ...
CSS实现自适应的图片背景边框代码
代码简介: CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳. 代码内容: View ...
转载 - 背景透明，文字不透明【学习】
[ 以下方法,测试后,IE6下,背景并未透明,暂不知解决办法.]<!DOCTYPE html> <html> <head> <meta charset=&qu ...
Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标文字分拆,使用字 ...

css实现单色或图片背景透明,而文字不透明的方法

css实现单色或图片背景透明,而文字不透明的方法相关推荐

最新文章

热门文章