本文介绍一个落实div毛玻璃背景的法门。本文介绍一个兑现div毛玻璃背景的方。实现div毛玻璃背景。

毛玻璃效果

ios里毛玻璃效果的以十分多,本文介绍一个兑现div毛玻璃背景的方法

毛玻璃效果

ios里毛玻璃效果的利用大多,本文介绍一个落实div毛玻璃背景的章程

原稿于自的博客☞心想事成div毛玻璃背景

CSS3 Filter

CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:

  1.grayscale灰度
  2.sepia褐色
  3.saturate饱和度
  4.hue-rotate色相兜
  5.invert反色
  6.opacity透明度
  7.brightness亮度
  8.contrast对比度
  9.blur模糊
  10.drop-shadow阴影
  每一样种植效应大家好自己试,考虑一下可以为此在哪些方面,
  这里仅仅以了内的blur,帮助实现高斯模糊的效力。
  兼容性我试了瞬间风靡的火狐和Chrome效果还是足以的,IE不用说了…

CSS3 Filter

CSS3的Filter主要用当图像的特效处理达成,默认值为none,还有以下备选项:

  1.grayscale灰度
  2.sepia褐色
  3.saturate饱和度
  4.hue-rotate色相兜
  5.invert反色
  6.opacity透明度
  7.brightness亮度
  8.contrast对比度
  9.blur模糊
  10.drop-shadow阴影
  每一样种植力量大家好团结试,考虑一下可以为此在哪些方面,
  这里仅仅以了内的blur,帮助实现高斯模糊的机能。
  兼容性我试了瞬间行的火狐和Chrome效果还是可以的,IE不用说了…

毛玻璃效果

ios里毛玻璃效果的利用非常多,本文介绍一个落实div毛玻璃背景的点子

filter:blur()

参数默认是0,单位px,不接受%,参数值的尺寸表示屏幕及为小像素融在齐,
所以值更老更加模糊。

filter:blur()

参数默认是0,单位px,不接受%,参数值的分寸表示屏幕及以略像素融在协同,
所以值更怪更加模糊。

CSS3 Filter

CSS3的Filter主要用在图像的特效处理达成,默认值为none,还有以下备选项:

  1. grayscale灰度
  2. sepia褐色
  3. saturate饱和度
  4. hue-rotate色相兜
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影
    各个一样栽功效大家可以好摸索,考虑一下可以为此在哪些方面,
    此只使用了中间的blur,帮助实现高斯模糊的效力。
    兼容性我碰了瞬间时的火狐和Chrome效果都是好的,IE不用说了…

:before()

:before是css中的同样种植伪元素,可用来在某元素之前插入某些内容。
之所以她来补充加模糊背景,具体用法可以看我另外一首?:before和:after

:before()

:before是css中之相同种植伪元素,可用来在某元素之前插入某些内容。
于是她来上加模糊背景,具体用法可以看本身另外一首?:before和:after

filter:blur()

参数默认是0,单位px,不接受%,参数值的高低表示屏幕及因略像素融在合,
所以值更充分更是模糊。

rgba()

毛玻璃背景及文字内容显示力量并无优,无论字体颜色颇要浅,看在连连怪怪的…因此还需加上同样重叠带色的半透明背景,一般是黑色,或白色。

rgba()

毛玻璃背景上文字内容展示效果并无可以,无论字体颜色异常或浅,看在连日来怪怪的…因此还欲加上同样交汇带色的半透明背景,一般是黑色,或白色。

:before()

:before是css中的平栽伪元素,可用以在有元素之前插入某些内容。
用她来补加模糊背景,具体用法可以看本身另外一篇☞:before和:after

示例:

图片 1

完通过三交汇重叠实现,
最好下面是歪曲层.blur_box:before,设置z-index: -2。
中间是rgba层.rgba,设置z-index: -1。
最为上面是情层.blur_box,设置z-index: 0。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
.bg{
  background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */
  width:100%;
  height:100%;
}
.blur_box{
  z-index: 0;/* 为不影响内容显示必须为最高层 */
  position: relative;
  overflow: hidden;
}
.blur_box:before{
  content: "";/* 必须包括 */
  position: absolute;/* 固定模糊层位置 */
  width:300%;
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;/* 回调模糊层位置 */
  background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
  filter: blur(20px);/* 值越大越模糊 */
  z-index: -2;/* 模糊层在最下面 */
}
.rgba{
  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
  position: absolute;/* 固定半透明色层位置 */
  width:100%;
  height:100%;
  z-index: -1;/* 中间是rgba半透明色层 */
}
.content_text{
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 50px 30px;
  line-height: 28px;
}
article{
  width:40%;
  height:300px;
  margin:120px auto;
}
</style>
<body
  <div class="bg">
    <article class="blur_box">
      <div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同,但已经设置过blur_box:before了 -->
      <div class="content_text">
        <h1>haha</h1>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
      </div>
    </article>
  </div>
</body>
</html>

诠释已经写的特别详细了,但出好几还是得单独说一下。因为blur()产生的模糊效果当值越老时,就会生越宽的边缘渐变过渡,为了消除(实际上只有是叫其看不展现),我将模糊层的升幅和高度都更换大,再经过top和left负值调整职务。

.blur_box:before{
  content: "";
  position: absolute;
  width:300%;/* 模糊层的宽度和高度都变大 */
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;
  background:url(1.jpg) no-repeat center center fixed; 
  filter: blur(20px);
  z-index: -2;
}

个中.rgba也可是转移呢白色半透明background-color:
rgba(255,255,255,0.2);,完全在自己,然后相应改变内容的字色。blur()的参数为得根据自己爱试着改变有想只要之法力。

http://hellopan.top/2017/10/31/%E5%AE%9E%E7%8E%B0div%E6%AF%9B%E7%8E%BB%E7%92%83%E8%83%8C%E6%99%AF/

示例:

图片 2

完整通过三层重叠实现,
极下是歪曲层.blur_box:before,设置z-index: -2。
中间是rgba层.rgba,设置z-index: -1。
尽上面是情层.blur_box,设置z-index: 0。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
.bg{
  background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */
  width:100%;
  height:100%;
}
.blur_box{
  z-index: 0;/* 为不影响内容显示必须为最高层 */
  position: relative;
  overflow: hidden;
}
.blur_box:before{
  content: "";/* 必须包括 */
  position: absolute;/* 固定模糊层位置 */
  width:300%;
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;/* 回调模糊层位置 */
  background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
  filter: blur(20px);/* 值越大越模糊 */
  z-index: -2;/* 模糊层在最下面 */
}
.rgba{
  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
  position: absolute;/* 固定半透明色层位置 */
  width:100%;
  height:100%;
  z-index: -1;/* 中间是rgba半透明色层 */
}
.content_text{
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 50px 30px;
  line-height: 28px;
}
article{
  width:40%;
  height:300px;
  margin:120px auto;
}
</style>
<body
  <div class="bg">
    <article class="blur_box">
      <div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同,但已经设置过blur_box:before了 -->
      <div class="content_text">
        <h1>haha</h1>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
      </div>
    </article>
  </div>
</body>
</html>

注解已经写的死去活来详细了,但有少数或者得单独说一下。因为blur()产生的歪曲效果当值越怪时,就见面时有发生越宽的边缘渐变过渡,为了打消(实际上仅是让其看不显现),我将模糊层的肥瘦和高度都易死,再经top和left负值调整位置。

.blur_box:before{
  content: "";
  position: absolute;
  width:300%;/* 模糊层的宽度和高度都变大 */
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;
  background:url(1.jpg) no-repeat center center fixed; 
  filter: blur(20px);
  z-index: -2;
}

里.rgba也可是转移呢白半透明background-color:
rgba(255,255,255,0.2);,完全在自己,然后相应变更内容之字色。blur()的参数为可以依据自己喜爱试着转有想使的效力。

http://hellopan.top/2017/10/31/%E5%AE%9E%E7%8E%B0div%E6%AF%9B%E7%8E%BB%E7%92%83%E8%83%8C%E6%99%AF/

rgba()

毛玻璃背景及文字内容展示力量并无精彩,无论字体颜色深要浅,看正在连连怪怪的…因此还需丰富同样交汇带色的半透明背景,一般是黑色,或白色。

示例:

毛玻璃效果.png

完通过三层重叠实现,
顶下面是歪曲层.blur_box:before,设置z-index: -2
中间是rgba层.rgba,设置z-index: -1
极上面是内容层.blur_box,设置z-index: 0
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
.bg{
  background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */
  width:100%;
  height:100%;
}


.blur_box{
  z-index: 0;/* 为不影响内容显示必须为最高层 */
  position: relative;
  overflow: hidden;
}
.blur_box:before{
  content: "";/* 必须包括 */
  position: absolute;/* 固定模糊层位置 */
  width:300%;
  height:300%;

  left: -100%;/* 回调模糊层位置 */
  top: -100%;/* 回调模糊层位置 */

  background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
  filter: blur(20px);/* 值越大越模糊 */

  z-index: -2;/* 模糊层在最下面 */
}
.rgba{
  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
  position: absolute;/* 固定半透明色层位置 */
  width:100%;
  height:100%;
  z-index: -1;/* 中间是rgba半透明色层 */
}

.content_text{
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 50px 30px;
  line-height: 28px;
}
article{
  width:40%;
  height:300px;
  margin:120px auto;
}

</style>
<body
  <div class="bg">
    <article class="blur_box">
      <div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同,但已经设置过blur_box:before了 -->
      <div class="content_text">
        <h1>haha</h1>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
      </div>
    </article>
  </div>
</body>
</html>

诠释已经勾勒的十分详细了,但生少数或者得单独说一下。因为blur()产生的模糊效果当值越老时,就会产生越宽的边缘渐变过渡,为了消除(实际上就是叫她看不显现),我拿模糊层的大幅度与冲天都变大,再经过topleft负值调整职务。

.blur_box:before{
  content: "";
  position: absolute;
  width:300%;/* 模糊层的宽度和高度都变大 */
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;
  background:url(1.jpg) no-repeat center center fixed; 
  filter: blur(20px);
  z-index: -2;
}

其中.rgba呢不过改吧白半晶莹剔透background-color: rgba(255,255,255,0.2);,完全取决于自己,然后相应变更内容之字色。blur()的参数为可因自己嗜试着改变有想要之力量。

相关文章