css 背景图片虚化效果

最新推荐文章于 2024-04-01 07:57:08 发布

weixin_30426879

最新推荐文章于 2024-04-01 07:57:08 发布

阅读量2.8k

点赞数

原文链接：http://www.cnblogs.com/zhuchenglin/p/6842456.html

版权

本文介绍了如何在CSS中为背景图片实现虚化效果，同时确保文字内容保持清晰。通过将图片和内容分别放置在两个div中，并设置背景div的模糊度，可以达到预期效果。

摘要由CSDN通过智能技术生成

转载地址：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: