css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍

在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。

在虚化背景时使用的是filter属性，我们就是利用filter属性中blur来设置虚化背景的。

代码如下：

img {

filter: blur(5px);

}

css虚化背景的效果如下：

上述这个方法只是简单的利用css将背景图片虚化，下面我们来看看稍微复杂一点的方法，当然也是利用filter属性

代码如下：

.mbl {

width: 20em;

height: 20em;

background: url(image/girl.jpg);

background-size: cover;

overflow: hidden;

margin: 30px;

}

.text {

width: 18em;

height: 18em;

margin: 1em;

background: hsla(0, 0%, 100%, .4);

color: black;

text-align: center;

overflow: hidden;

position: relative;

}

.text::before {

position: absolute;

background: url(image/girl.jpg);

background-size: cover;

top: 0;

right: 0;

bottom: 0;

left: 0;

content: '';

filter: blur(4px);

/* background: rgba(225, 0, 0, 0.5);*/

}

.text p {

height: inherit;

width: inherit;

display: table-cell;

vertical-align: middle;

position: relative;

}

图片上面的文字内容

背景图片虚化效果如下：

说明：上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片，利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小，然后用blur滤镜进行虚化处理，就会想上面的效果那样。

本篇文章到这里就全部结束了，更多精彩的内容大家可以关注php中文网的相关教程栏目！！！

css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍相关推荐

css实现图片虚化_CSS中实现图片自适应的方法
在我们布局中难免会遇到,图片或icon因为大小不一样,但在我们写样式时高宽都固定,而导致图片拉升影响美观. 你可以选择让UI重新切图或者自己切,但是你要知道的是,如何让图片在固定的范围内自适应大小. ...
background图片叠加_css怎么让两个背景图片重合显示？
css怎么让两个背景图片重合显示?下面本篇文章给大家介绍一下使用css让让两个背景图片重合显示的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,可以使用backgr ...
css背景图片高斯模糊_CSS背景
css背景图片高斯模糊 Well, you have now seen the syntax of CSS and are now comfortable with writing CSS rules ...
css dl图片布局,经典图文列表以及CSS布局切换
Android:在任务列表隐藏最近打开的app 对于某一个应用,如果不想在最近打开的app列表中留下任何纪录,即按下Home键回到主页,再按任务键的时候,任务列表看不到这个app,在AndroidMa ...
图片轮播，纯js+css
图片轮播,纯js+css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...
php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css修饰页面怎么制作,【转载】CSS修饰图片
有人翻译了<css decorative gallery>这篇文章,这写也是我们前端开发的时候经常用到的一些技巧.感谢翻译者,感谢webdesignerwall 这篇文章主要介绍了用简单的 ...

css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍

css实现图片虚化_css怎么虚化背景图片？css虚化背景图片的方法介绍相关推荐

最新文章

热门文章