文档章节

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
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
用最短的CSS样式,勾勒大数据演示屏

先看案例效果,再看心得与总结 前段时间撸了一个演示平台,输入任一手机号,可追踪其行迹,类似《人民的名义》追踪丁义珍的效果,很明显涉密了,因此特意克隆了一个,并把后端阉割了,目前查...

maodayeyeye
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ui2code中的深度学习+传统算法应用

背景 在之前的文章中,我们已经提到过团队在UI自动化这方面的尝试,我们的目标是实现基于 单一图片到代码 的转换,在这个过程不可避免会遇到一个问题,就是为了从单一图片中提取出足够的有意...

阿里云官方博客
39分钟前
2
0
1-2 【包子mysql系列】, 对mysql的innoDB加锁分析

innoDB的事务,是基于锁来实现的,用到事务不自然就会用到锁,而如果对锁理解的不通透,很容易造成线上问题。 数据库加锁的分析,和事务的引擎,隔离级别,索引,主键索引都有关系, 如果去考...

爱吃大肉包
52分钟前
0
0
插入排序

/** * 插入排序 * @Title: insert * @Description: TODO(这里用一句话描述这个方法的作用) * @param 参数 * @return void 返回类型 * @throws */ static void insert(int[] arr ){ for(int i......

yzzzzzzzz
55分钟前
3
0
python Kmeans算法解析

一. 概述 首先需要先介绍一下无监督学习,所谓无监督学习,就是训练样本中的标记信息是位置的,目标是通过对无标记训练样本的学习来揭示数据的内在性质以及规律。通俗得说,就是根据数据的一...

终日而思一
55分钟前
3
0
Nginx+Keepalived实现站点高可用

Nginx+Keepalived实现站点高可用

吴伟祥
56分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部