文档章节

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

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/27 09:10
字数 237
阅读 4
收藏 0

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

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);
}
<div class="demo1">背景图半透明,文字不透明<br />方法:背景图+ filter:blur</div>

毛玻璃效果

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);
}
<div class="demo2-bg">
    <div class="demo2">背景图半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div>
</div>

半透明效果

本文转载自:https://my.oschina.net/mayxu/blog/877432

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
私信 提问
CSS3实现背景透明,文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度。 效果如下: 这样貌似也满足了需求,不过并不...

neromaycry
2018/06/23
0
0
兼容几乎所有浏览器的透明背景效果

当今的大部分网页设计都包含了半透明的元素.但用CSS实现想要的效果却没那么简单. 现存的问题 如果我们想要一个半透明背景,有两种实现方式: – 利用CSS和opacity属性 – 建立一个24位PNG背景图...

glowry
2014/05/03
0
3
CSS 图像透明/不透明

使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CS...

wybo521
2016/01/21
6
0
HTML 使用CSS 设置透明度Opacity

HTML/CSS标签透明度效果的实现 在HTML+CSS编程中,实现半透明背景,通常有3中做法,分别是使用RGBA,PNG和CSS filter。 方法一. 第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H...

IamOkay
2014/11/16
0
1
CSS3.0新增属性

背景图片设定 background 默认图片重复 css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 background-size规定背景图片的尺寸 background-size:cover 优先宽释放 高度根据宽度...

RanoB
2016/12/27
7
0

没有更多内容

加载失败,请刷新页面

加载更多

都996了,研发效能还是提不出起来,关键在这里

本文作者:何勉 上一篇我们介绍了研发效能提升目标及其度量方法。(本文是阿里“研发效能提升系列”的第2篇,第1篇“研发效能的定义和度量”敬请期待 研发效能的提升必须落实为团队需求、协作...

阿里云云栖社区
11分钟前
0
0
阿里高级技术专家:研发效能的追求永无止境

背景 大约在5年前,也就是2013年我刚加入阿里的时候,那个时候 DevOps 的风刚吹起来没多久,有家公司宣称能够一天发布几十上百次,这意味着相比传统软件公司几周一次的发布来说,他们响应商业...

zhaowei121
21分钟前
1
0
深度解读 | 等保2.0之移动互联安全扩展要求解读

数字经济下,企业的生态核心是应用为核心。随着移动互联网的发展,移动应用已渗透各行各业,与工作、生活息息相关。工信部发布的数据显示,截至2018年8月底,我国市场上监测到的移动应用App...

工作的事
28分钟前
0
0
垃圾收集器

1、哪些内存需要回收? 2、什么时候回收? 3、如何回收? "自动回收" 当需要排查各种内存溢出、内存泄露问题时 当垃圾集成为系统达到更高并发量的瓶颈时 引用计数算法 假设方案一:给对象中添...

恋码之子
28分钟前
0
0
独家解密:阿里大规模数据中心性能分析

郭健美,阿里巴巴高级技术专家,目前主要从事数据中心的性能分析和软硬件结合的性能优化。CCF 系统软件专委和软件工程专委的委员。曾主持国家自然科学基金面上项目、入选上海市浦江人才计划A...

阿里云官方博客
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部