文档章节

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

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/27 09:10
字数 237
阅读 4
收藏 0
点赞 0
评论 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
CSS3.0新增属性

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

RanoB
2016/12/27
7
0
解决文字和text-decoration:underline下划线重叠问题

解决文字和text-decoration:underline下划线重叠问题 张鑫旭-鑫空间-鑫生活2016-11-2240 阅读 box-shadowgradientcanvasfilterborder by zhangxinxu from http://www.zhangxinxu.com/wordpr......

张鑫旭-鑫空间-鑫生活
2016/11/22
0
0
iOS开发tips-UINavigationBar的切换

概述 在iOS系统中,如果控制器是以push方式进行管理的话,那么事实上多个控制器是共享的同一个导航栏。当然iOS系统的设计无可厚非,但是国内的应用经常会遇到很多个性的设计,就比如说A pus...

jianxin160
2017/11/08
0
0
CSS3.0中文手册及相关资源

今天无意看到一个CSS样式里有段代码很是陌生,经查居然是CSS3.0的样式代码。leesum曾收藏过苏沈小雨的CSS2.0中文手册对网页代码编写很是有帮助。秉承学习至上的精神搜CSS3.0中文手册的时候发...

晨曦之光
2012/03/09
0
0
巧用CSS的alpha滤镜

作者:冯永曜 “Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度...

晨曦之光
2012/03/09
59
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TensorFlow 作用域与操作符的受限范围

variable_scope 影响变量和操作符 name_scope 只影响操作符 with tf.name_scope(""),使用空字符串将作用域返回到顶层 tf.variable_scope("") 相当于添加一个空层 import tensorflow as tf...

阿豪boy
10分钟前
0
0
Java面试基础篇——第六篇:常见Map类的区别

常见的map类有: HashMap, ConcurrentHashMap (Jdk1.8) , LinkedHashMap, TreeMap, Hashtable。 其中我们最常用的莫过于HashMap, 和并发情况下使用的ConcurrentHashMap了,它们的主要区别就在...

developlee的潇洒人生
12分钟前
0
0
崛起于Springboot2.X之前端模版freemaker(23)

1、配置文件 spring: freemarker: allow-request-override: false cache: true check-template-location: true charset: UTF-8 content-type: text/html ......

木九天
28分钟前
1
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

夜黑人模糊灬
30分钟前
0
0
大数据分析挖掘技术学习:Python文本分类

引言 文本分类作为自然语言处理任务之一,被广泛应用于解决各种商业领域的问题。文本分类的目的是将 文本/文档 自动地归类为一种或多种预定义的类别。常见的文本分类应用如下: • 理解社交媒...

加米谷大数据
35分钟前
0
0
istio-0.8 指标监控,prometheus,grafana

配置: https://istio.io/docs/tasks/telemetry/metrics-logs/ https://istio.io/docs/tasks/telemetry/tcp-metrics/ envoy拦截请求>上报mixer>对接prometheus>grafana 效果截图: promethe......

xiaomin0322
37分钟前
0
0
公众号推荐

阿里技术 书籍:《不止代码》

courtzjl
40分钟前
0
0
关于改进工作效率

1.给不同的业务线建立需求群,所有的数据需求都在群里面提。 2.对于特别难搞定的事情,到对应的技术哪去做,有问题随时沟通。 3.定期给工作总结形成方法论。 4.学习新的技术,尝试用新的方法...

Avner
46分钟前
0
0
关于thinkphp 框架开启路径重写,无法获取Authorization Header

今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews Rewrite......

殘留回憶
50分钟前
0
0
centos 使用yum安装nginx后如何添加模块 10

centos 使用yum安装nginx后如何添加模块 10 centos6.2版本,使用yum来安装了nginx,但是最近需要重新添加模块,所以就傻了,询问下有人知道怎么重新添加模块吗? PS:俺是新手,需要高手救助...

linjin200
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部