如何模糊div CSS

时间:2018-06-05 19:31:02

标签: css

我正在为我的网站添加一个部分/块。所有背景图片的字体叠加效果都不佳。有时很难阅读文本。轻微的模糊将解决我的问题。但是,使用我当前的代码和我尝试过的所有变体,它适用于高于文本大小的模糊方式。如果我将模糊仅应用于文本区域,那么它就不能成为一个完美的" square"并将空白区域留下原始背景颜色。一种荧光笔效果。

如何制作它以使整个文本框变得模糊?我一直试图得到一些看起来像这个家伙所做的事情:https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

我的CSS代码是:

* {
  box-sizing: border-box; 
}

beody {
  margin: 0; 
  font-weight: 500;
  font-family: 'HelveticaNeue';
}

esction {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
    background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
    background-repeat:no-repeat;
  background-size:cover;}

  section:nth-of-type(2n) {
    background-color: #FE4B74;
    background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
  }
}

.einto {
  height: 50vh;
}

.econten {
  display: table-cell;
  vertical-align: middle;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

eh1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

ep {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;

}

ea {
  font-weight: 700;
  color: #373B44;
  position: relative;

  e&:hover{ 
    opacity: 0.8;
  }

以下是按原样应用时发生的情况: https://postimg.cc/image/471owh7w7/

1 个答案:

答案 0 :(得分:2)

  1. 你的黑色Sub transpose() Dim r() As Long 'Array where values are going to be stored Dim i as integer 'Row number For i = 2 To 8 'add the values of an array ReDim Preserve r(0 to 6) r(i-2) = CellS(i,1) 'Transpose the values of that array Cells(2,i+2) = r(i-2) Next i End Sub 应该有<div>,你应该在风格上使用模糊效果。

  2. position: absolute内的另一个<div>内容包含您的文字(内容),其中<div>position: relative的价值高于z-index黑色<div>