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,左右则根据宽度自适应相同值,即居中)即 ...
随机推荐
- iOS 基础之NSArray数组去重
1.面试题 现在有一个数组arr1,它里面存储的字符串分别为@“zhangsan”@“lisi”@“wangwu”@“lisi”@“zhangsan”,请将它去重后赋值给可变数组arr2输出为:@“z ...
- leetcode-896-单调数列
题目描述: 如果数组是单调递增或单调递减的,那么它是单调的. 如果对于所有 i <= j,A[i] <= A[j],那么数组 A 是单调递增的. 如果对于所有 i <= j,A[i] ...
- leetcode-292-Nim Game（搬石子）
题目描述: You are playing the following Nim Game with your friend: There is a heap of stones on the tabl ...
- CF1007D. Ants（树链剖分＋线段树＋2-SAT及前缀优化建图）
题目链接 https://codeforces.com/problemset/problem/1007/D 题解 其实这道题本身还是挺简单的,这里只是记录一下 2-SAT 的前缀优化建图的相关内容. ...
- Wi-Fi科普讲稿
Wi-Fi 从入门到?? 组员:deleted 什么是Wi-Fi Wi-Fi 在中文里又称作"无线热点",是Wi-Fi联盟制造商的商标做为产品的品牌认证,是一个创建于IEEE 80 ...
- mono for android读书笔记之真机调试(转)
调试环境: 1.软件:monodevelop v3.0.3.5 2.硬件:华为C8650s手机一部,数据线一根,thinkpad e420笔记本电脑一台 调试的应用程序有一个Activity,Acti ...
- VS2015 release模式下进行debug调试
有时候软件发布,又不得不调试其中的某个dll模块, 这时候就需要在发布的release版本的软件中来调试其中的dll模块了. vs2015设置: 1.Release模式下右键工作属性,选择C/C++, ...
- php 如何截取中文字符串
在网站应用中时常需要对相应的字符串进行截取.最常用的是使用substr函数对字符串进行截取. 然而,substr和strlen函数只在处理英文字符串时可以正确使用,在截取中文字符时,时常出现乱码.这时 ...
- 对于maven创建spark项目的pom.xml配置文件（图文详解）
不多说,直接上干货! http://mvnrepository.com/ 这里,怎么创建,见 Spark编程环境搭建(基于Intellij IDEA的Ultimate版本)(包含Java和Scala版 ...
- python-wsgi测试服务器
#!/usr/bin/python from wsgiref.simple_server import make_server def application(environ,start_respon ...