css设置背景模糊
使用filter属性来设置模糊值
效果：
css样式：
<style type="text/css">
.cover {
width: 600px;
height: 300px;
position: relative;
text-align: center;
line-height: 300px;
color: #fff;
margin: 20px auto;
} .cover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 300px;
background: transparent url(Images/picture/5.jpg) center center no-repeat;
filter: blur(8px);
z-index: -1;
background-size: cover;
}
</style>
HTML结构：
<body>
<div class="cover">
<h2>背景模糊，文字清晰显示</h2>
</div>
</body>
css设置背景模糊的更多相关文章
- css 设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
- 兼容性所有浏览器的透明CSS设置
兼容所有浏览器的透明CSS设置: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- css设置水平垂直居中
关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...
- css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...
- 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
随机推荐
- yum 安装和卸载
yum list列出资源库中特定的可以Linux Yum安装或更新以及已经安装的rpm包 安装 yum install 安装包关键字 卸载 yum remove 安装包名
- JSP里面九个内置对象
JSP内置对象(9个常用的内置对象) 1.request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求, 然后做出响应.它是HttpServletRequest类的实例 ...
- 题解51nod1515——明辨是非
前提 在这道题老师讲过之后,再考时,我还是WA了ヽ(*.>Д<)o゜果然,我还是好菜啊~%?…,# *'☆&℃$︿★? 谢谢Jack_Pei dalao的帮忙.~~O(∩_∩)O~ ...
- VS 代码自动对齐快捷键
全部代码代码自动对齐快捷键为 Ctrl + a(按后可松松手) + k(按后可松松手) + f
- 插播一条 QQ头像无法正常显示问题
问题背景 不知道啥什么,QQ群的头像有些显示不全直接是默认的头像.想一想最近也没做啥,怎么就出问题了. 后来想一想,大概是个人文件夹的文件出问题了 解决办法 好友头像显示问题的删除 MiscHead. ...
- （一）Audio子系统之AudioRecord.getMinBufferSize
在文章<基于Allwinner的Audio子系统分析(Android-5.1)>中已经介绍了Audio的系统架构以及应用层调用的流程,接下来,继续分析AudioRecorder方法中的ge ...
- dubbo集群容错之LoadBalance
原文地址:Dubbo 源码分析 - 集群容错之 LoadBalance dubbo 提供了4种负载均衡实现,分别是基于权重随机算法的 RandomLoadBalance.基于最少活跃调用数算法的 Le ...
- UI的线程问题：单线程原因及更新UI的四种方式
1.UI线程为什么设计为单线程? UI控件的操作不是线程安全的,对于多线程并发访问的时候,如果使用加锁机制会导致: UI控件的操作变得很复杂. 加锁的操作必定会导致效率下降. 所以android系统在 ...
- 对Tensorflow中tensor的理解
Tensor即张量,在tensorflow中所有的数据都通过张量流来传输,在看代码的时候,对张量的概念很不解,很容易和矩阵弄混,今天晚上查了点资料,并深入了解了一下,简单总结一下什么是张量的阶,以及张 ...
- @Controller 和 @RestController 区别
@Controller 用于标识为spring MVC的controller @RestController 是一个便利的注解,加了这个注解就相当于加了@Controller 和 @ResponseB ...