3. 用css实现玻璃磨砂效果

zlx362211854 commented 5 years ago

NewNewKing commented 5 years ago

我的思路是使用filter属性来做成高斯模糊 filter: blur(2px) 整体思路需要使用三层最下一层为背景图第二层为一个需要模糊的区域背景需要和背景图一样（显示图的一部分）然后设置filter: blur(2px) 第三层为textarea 来进行文字输入（单独做这一层是为了使文字不被模糊掉背景色为透明的）还可以设置一点box-shadow等等

roxy0724 commented 5 years ago

对要模糊的节点进行伪类元素操作filter: blur(5px);同时对节点进行z-index的层级处理，防止被伪类元素压在下方

zlx362211854 commented 5 years ago

思路是：同一张图片，同时作为背景页面的background和内容区域的background,两张背景图都cover，然后给内容区域的背景设置不透明度，这样就能实现：具体代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        background: url('./bg.jpg') 0 / cover fixed;
      }
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .main {
        width: 800px;
        height: 450px;
        display: inline-block;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 5px 1px rgb(32, 32, 32);
        position: relative;
        background: hsla(0, 0%, 100%, 0.5);
        background-image: url('./bg.jpg') 0 / cover fixed;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main">
          Mensa (Latin for "table") is a constellation in the southern celestial
          hemisphere near the south celestial pole. It is one of the 88 modern
          constellations, and one of twelve drawn up in the 18th century by
          French astronomer Nicolas-Louis de Lacaille. Originally named for
          Table Mountain overlooking Cape Town, South Africa, where Lacaille
          made observations, it covers a keystone-shaped wedge of sky of
          approximately 153.5 square degrees. Other than the south polar
          constellation of Octans, it is the most southerly of constellations
          and is only observable south of the 5th parallel of the Northern
          Hemisphere. Barely visible in suburban skies, Mensa is one of the
          faintest constellations in the night sky. At least three of its star
          systems have been found to have exoplanets. Parts of the Large
          Magellanic Cloud, several star clusters and a quasar lie in the area
          covered by the constellation. (Full article...)
      </div>
    </div>
  </body>
</html>

goldEli commented 5 years ago

1564110374796

具体思路：

分三层，最下一层为背景图，中间层为高斯模糊图层，最上一层为 textarea
高斯模糊图层，需用用到 filter 的 blur 属性，filter: blur(2px)，值越大模糊效果越明显
textarea 层是透明的，不能用 opacity, 这样会导致输入的内容也会透明，用 background 的 RGBA 属性，A 代表透明度，设置为 0.

代码实现：

  <div class="glass"></div> 
  <textarea class="input_area"></textarea>

   html{
     height: 100%;
   }    
   body {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
   }
  .glass {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    height: 200px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2); 
    border-radius: 5px;
    background: inherit;
    filter: blur(5px);
    z-index: -1;
  }
  .input_area{
    color: #ffffff;
    font-size: 20px;
    border: none;
    overflow: auto;
    outline: none;
    resize: none;
    width: 400px;
    height: 200px;
    background: rgba(204, 204, 204, 0);
  }

Refrence

zlx362211854 / daily-study

3. 用css实现玻璃磨砂效果 #4