css 背景图片虚化效果
转载地址:http://blog.csdn.net/ohehehou/article/details/51975539
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。
原始代码:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff; font-size: 40px; } .bg { background: url('1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; height:600px; text-align: center; line-height: 600px; } </style> </head> <body> <div class="bg"> <div class="content">我是内容</div> </div> </body> </html>
原始效果:
解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置。
html代码:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff; font-size: 40px; } .bg { background: url('1.jpg'); height:600px; text-align: center; line-height: 600px; } .bg-blur { float: left; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } .content-front { position:absolute; left: 10px; right: 10px; height:600px; line-height: 600px; text-align: center; } </style> </head> <body> <div> <div class="bg bg-blur"></div> <div class="content content-front">我是内容</div> </div> </div> </body> </html>
效果:
转载于:https://www.cnblogs.com/zhuchenglin/p/6842456.html
css 背景图片虚化效果相关推荐
- css实现图片虚化_HTML+CSS入门 如何实现背景图片虚化效果
本篇教程介绍了HTML+CSS入门 如何实现背景图片虚化效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需求:一个div设置了background: url,现在需要 ...
- div图片背景虚化不影响图片上的文字_HTML+CSS入门 如何实现背景图片虚化效果
本篇教程介绍了HTML+CSS入门 如何实现背景图片虚化效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需求:一个div设置了background: url,现在需要 ...
- html css 背景图片
html css 背景图片 文章目录 html css 背景图片 视频 代码 视频 https://www.bilibili.com/video/BV1MJ411M7qi?from=search&am ...
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
- css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL
css背景图片添加url Say you want to put an image or two on a webpage. One way is to use the background-imag ...
- [转]解决IE下CSS背景图片闪烁的Bug
[转]解决IE下CSS背景图片闪烁的Bug <P> 很多时候我们要给一些按钮或是img设置背景,而为了达到数据与表现样式分离的效果,通常背景样式都是在CSS里设定的,但是这个 ...
- css 背景图片的虚化
css 背景图片的虚化 背景虚化时出现页面内容也被虚化的情况,使用伪类::before body .bg {position: relative;width: 100%;height: 100%;ov ...
- html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
- php图片背景平铺,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
最新文章
- Spline interpolation and Savitzki-Golay smoothing
- linux文本处理常用命令
- c语言中成绩等级流程图画法,大家帮我看看这个程序的流程图怎么画,谢了
- pythonsuper函数_怎么使用python super函数调用父类
- CentOS+Nginx一步一步开始配置负载均衡
- 全面的Spring Boot配置文件详解
- MySQL数据库导入错误:ERROR 1064 (42000) 和 ERROR at line xx: Unknown command '\Z'.
- idea 编译时提示找不到符号
- Windows查看快捷键占用情况
- Python+OpenCv实现摄像头人脸识别
- python获取图像灰度极值点_【图像处理】灰度图、亮度峰值极值查找
- canvas图片合成模糊变清晰的方法
- 防火墙基础之路由器与防火墙单臂路由和DHCP接口地址池的配置
- html:button按钮背景图片设置
- STM32的存储器与寄存器
- 视频教程-Java进阶高手课-Spring精讲精练-Java
- linux 下使用百度云盘
- Java毕设项目汽车4S服务管理系统(java+VUE+Mybatis+Maven+Mysql)
- GPU大百科全书 第四章:虚与实共舞的TMU
- 2019年浙江大学计算机学院的考研经验