欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css怎么虚化背景图片?Css虚化背景图片的方法介绍

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

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

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

代码如下:

<!DOCTYPE Html>
<Html>
<head>
<style>
img {
    filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300" height="300">
</body>
</Html>

Css虚化背景的效果如下:

2345截图20181026140821.png

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

代码如下:

<!DOCTYPE Html>
<Html>
<head>
<style>
  .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;
}
</style>
</head>
<body>
<div class="mbl">
        <div class="text">
          <p>图片上面的文字内容</p>
        </div>
    </div>
</body>
</Html>

背景图片虚化效果如下:

2345截图20181026141812.png

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

本篇文章到这里就全部结束了,更多精彩的内容大家可以关注杨雨个人博客的相关教程栏目!!! 本文地址:http://itbyc.com/web/css3/20377.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1