background滤镜效果及高斯模糊

2016-10-31 03:36:29

background滤镜效果

场景及实现:父级div嵌套子div,父div有背景图片,子div中有文字,需要实现背景图加黑色半透明遮罩,不影响子div中文字的显示效果。

CSS的filter滤镜效果的Brightness属性可以实现遮罩效果,但是类似于opacity属性,这种效果会影响子div的显示效果:
解决方法:

<div id="section1">  
    <div id="content">
    </div>
</div>  
#section1 {
    background: url('../images/bg-img.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
}
#content {
    position: absolute;
}
#section1::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

效果:

模拟iOS实现高斯模糊效果

使用filter的blur属性实现背景高斯模糊:

div {  
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Div+contenteditable 模拟 textarea 及存在的问题

在网页端实现聊天功能时,大多会采用textarea来实现,但是当需要在textarea中显示表情/图片时,就不好实现了。这时候普遍的方法是给div添加contenteditable属性,来模拟textarea,而在div中显示图片及表情就可以轻松实现了。 The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: true or the empty string,

Echarts3 中国地图下钻至县级

Echarts3 地图下钻至县级 看了会D3.js,鉴于学习曲线较高,且要实现的效果不复杂,遂使用Echarts完成——中国地图下钻至县级。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts3中国地图下钻至县级</title> <link rel="stylesheet" type="text/css" href="static/css/main.css"> <!-- Echarts3 --> <