读w3cplusCSS秘密花园:磨砂玻璃效果的收获

最新推荐文章于 2024-08-10 14:29:40 发布

win0032

最新推荐文章于 2024-08-10 14:29:40 发布

阅读量1.5k

点赞数

分类专栏：博客读后感文章标签：毛玻璃

本文链接：https://blog.csdn.net/win0032/article/details/50488750

版权

博客读后感专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HSLA色彩模式和filter的blur()方法在网页中实现毛玻璃效果。通过设置元素的背景图片、定位和模糊效果，以及理解background-position、background-size和background-clip等属性，实现文字清晰、背景模糊的视觉效果。

摘要由CSDN通过智能技术生成

原文地址：http://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html

原文主要介绍了如何实现网页中的毛玻璃效果

我的收获：

1.HSLA，这是一种色彩模式，

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

<div class="main">
      <blockquote>
      “The only way to get rid of a temptation[…]”<br />
      “The only way to get rid of a temptation[…]”<br />
      “The only way to get rid of a temptation[…]”<br />
      “The only way to get rid of a temptation[…]”<br />
           <footer>
               <cite>
                 Oscar Wilde,
                 The Picture of Dorian Gray
               </cite>
          </footer>
     </blockquote>
</div>

 body{
     background: url(img/2.jpg) 0 no-repeat; 
}
.main{
     background: hsla(350,10%,60%,.4);
     width: 800px;
     height: 300px;
     margin-left: 100px;
     font-weight: bold;
     font-size: 24px;
}

效果如下：

2.blur()方法 filter()方法

blur()方法：概念是当前元素失去焦点时元素的状态。

比如当点击输入框之外的区域，输入框会失去当前的焦点，这是可以这样来定义输入框的失去焦点时的样式：

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

filter()方法：起到基本的筛选作用，下面的代码可以在页面所有div中筛选出类名为middle的div来设置他们的样式。

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

而当两种方法结合使用时，就能够起到蒙板的作用

.blur{
     filter: url(blur.svg#blur);
     -webkit-filter: blur(10px);
     -moz-filter: blur(10px);
     -ms-filter: blur(10px);
     filter: blur(10px);
 }

<div class="blur">
       <img src="img/2.jpg" />	
 </div>

效果如下：

结合上面的几种方法，作者提出了一种方案能够实现毛玻璃效果，大致思路如下：

给定文字框一个类名main

然后给定main::before一个和页面相同的背景图片，然后利用z-index=-1将main::before放在main的下方，这样在添加blur时文字就不会变模糊。

body, main::before {
    background: url("http://csssecrets.io/images/tiger.jpg") 0 /cover fixed;
}
main {
    position: relative;
     margin: 0 auto;
     padding: 1em;
    background: hsla(0,0%,100%,.25) border-box;
    max-width: 23em;
     overflow: hidden;
 }
main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: -30px;
    z-index: -1;
    filter: blur(20px);
}
body {
   min-height: 100vh;
   box-sizing: border-box;
   margin: 0;
   padding-top: calc(50vh - 6em);
   font: 150%/1.6 Baskerville, Palatino, serif;
   }