html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。

1.毛玻璃效果：背景图 + 伪类 + flite:blur(3px)

.demo1{

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: "";

position: absolute;

top: 0;

left: 0;

z-index: -1;/*-1 可以当背景*/

-webkit-filter: blur(3px);

filter: blur(3px);

}

背景图半透明，文字不透明
方法：背景图+ filter：blur

2.半透明效果：背景图 + 定位 + background:rgba(255,255,255,0.3)

.demo2-bg{

background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;

background-size: cover;

width: 500px;

height: 300px;

position: relative;

}

.demo2{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 500px;

height: 300px;

line-height: 50px;

text-align: center;

background:rgba(255,255,255,0.3);

}

背景图半透明，文字不透明
方法：定位+ background:rgba(255,255,255,0.3)

html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法相关推荐

css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果方法: 背景图片层添加样 ...
html图片定位坐标原点,利用CSS定位背景图片的常用方法总结
前言大家在网上最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混 ...
防止email被抓取的两种方法（js和css）
现在很多无聊人士都用自己的spider在网上到处抓取email, 如果你的页面上写了自己的email,那么不多久就会收到很多垃圾邮件. 有很多方法可以避免被抓取,现在很多人都把@换成#,不过估计很多蜘 ...
AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
ArcGIS Engine开发系列：将地图导出为图片的两种方法
转自:http://blog.sina.com.cn/s/blog_4c5f70df0100a0ti.html 在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或L ...
php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...

html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法

html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法相关推荐

最新文章

热门文章