首页 » 前端技术 » 如何用css设置背景图片模糊,并且内容文字不模糊

如何用css设置背景图片模糊,并且内容文字不模糊

高蒙 2016/10/17 21:03 2.7k浏览 0评论 Html/Css


问题阐述:在项目中遇到一个播放器的效果,背景是透明的效果。上面是清晰的按钮和文字。

解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置。

html代码:

<div class="video-info-top">
    <div class="video-bg blur" style="background:url(1.png) no-repeat;background-size: cover;"></div>
    <div class="video-info-bottom">
        <div class="photo">
            <a href=""><img src="1.png"></a>
        </div>
        <div class="video-info">
            <div class="myvideo"></div>
            <div class="detail">
                <div class="left ">
                    <i class="fa fa-navicon"></i>
                    <span>播放列表</span>
                </div>
                <div class="buttons">
<span>
<i class="icon-backward" aria-hidden="true"></i>
</span>
<span>
<i class="icon-play-w" aria-hidden="true"></i>
</span>
<span>
<i class="icon-forward" aria-hidden="true"></i>
</span>
</div>
                <div class="right">
                    <i class="fa fa-star-o"></i>
                    <span>156</span>
                </div>
            </div>
        </div>
    </div>
</div>

css代码:

.video-info-top { width: 100%; height: 20rem; display: table; position: relative; }
.video-info-top .video-bg { width: 100%; height: 20rem; position: absolute; top: 0; left: 0; z-index: 999 }
.video-info-top .video-info-bottom { width: 100%; position: absolute; left: 0; bottom: 1rem; z-index: 9999; padding: .65rem;}
.video-info-top .video-info-bottom .photo { width:7rem; height: 7rem; border-radius: 50%; overflow: hidden; text-align: center; margin: 0 auto; border: .3rem solid rgba(0,0,0,.1); margin-bottom: 2rem; }
.video-info-top .video-info-bottom .photo a { width:7rem; height: 7rem; display: block;  }
.video-info-top .video-info-bottom .photo img { width: 100%; }
.video-info-bottom .myvideo { margin: 0 auto; width: 20rem; height: 1rem; background: #000; }
.video-info-bottom .detail { width: 100%; margin-top: 2rem; color: #fff; position: relative; font-size: 1.5rem; text-align: center}
.video-info-bottom .detail .left { position: absolute; left: 0; top: .65rem }
.video-info-bottom .detail .left span,.video-info-bottom .detail .right span { font-size:.8rem ; display: block; }
.video-info-bottom .detail .right { position: absolute; right: 0; top: .65rem }
.buttons { width: 100%; text-align: center; }
.buttons i { margin: 0 1rem; width: 2rem; height: 2rem; display: inline-block; }
i.icon-play-w { width: 3rem; height:3rem;background: url(../images/icon-play-w.png) bottom no-repeat; background-size: 3rem; }
i.icon-backward { background: url(../images/icon-backward.png) no-repeat; background-size: 1.5rem }
i.icon-forward { background: url(../images/icon-forward.png) no-repeat;background-size: 1.5rem  }

效果: 

111.jpg




相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    481

    标签

    38

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。