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

 Html/Css   高蒙   阅读(1966)   评论(0)   2016-10-17 21:03:13    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




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

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


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客