CSS 背景图片虚化

html-css06

CSS 背景图片虚化,第1张

背景图片虚化主要依靠的是 filter: blur(15px) 这个css属性 blur值 越大 模糊程度也越大 最终我们希望的效果图是这样的 实现方式： 第一步 一个大的 div 里面包裹两个 小的 div1 和 div2 第二步 div1元素加入背景、宽高、过滤（filter)、浮动 第三步 div2元素 开启定位 absolute（一定要脱离普通文档流） 现在基本的效果就实现了，想让页面更美观 剩下的就要自己动手喽 关键点就是 filter属性 ：让图片模糊 脱离普通文档流 ：内容放到模糊div1 的上面

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#a').css('-webkit-filter', 'grayscale(50%)')。

3、浏览器运行index.html页面，此时下方div的背景图片确实变暗，文字却没有影响。

说明一下，

背景图片是调整不了透明度的，你只能调整容器的透明度来实现容器内的背景，内容也出现透明度。

<style>

#box{

width:200px

height:200px

background:url(背景路径)

opacity:0.5

filter:"alpha(opacity=50)"

-ms-filter:"alpha(opacity=50)"/* 旧版IE */

}

</style>

<div id=box></div>