在Div CSS背后模糊

Question

我正在一個網站上工作，我需要在div后面背景藍色，我無法找到使用CSS的方法。

我找到了一篇文章，展示了如何做到這一點，但我無法准確地復制它。

這篇文章是： https ： //jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

這是我的頁面： http ： //biolinks.redxte.ch/blur

如果有人能讓我知道我做錯了什么就會很棒，謝謝。

Answer 1

你真是太近了！

刪除position: relative對於.name-container並將其添加到.head

更新 ：

刪除.name-bg ，（如果需要，使用display: none ），並將.name z-index更改為1或更大。 然后添加此代碼。

.name:after {
  content: "";
  display: block;
  position: absolute;
  background-position: center -373px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(10px);
  border-radius: 8px;
  z-index: -1;
}

.head, .name:after {
  background-size: 1500px auto; /* Really, this */
  background-position: center; /* and this is the only code .head needs  */
  background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}

注意 ：作為使用的網站，您不得不設置絕對background-size 。 此外，隨着@media代碼的使用，你需要修改一下代碼。

希望能幫助到你！

Answer 2

又一個實施。 請注意，缺點是您必須復制文本才能在兩個位置獲得相同的高度（可以使用JS或其他東西來做到這一點，以便更清潔）

HTML：

<div class="outer">
  <div class="inner">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
  <div class="inner with-text">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
</div>

SCSS：

@import "compass/css3";

$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";

.outer{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:url($normal-img);
  background-repeat:no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.inner {
  background-image:url($normal-img);
  background-repeat:no-repeat;
  @include background-size(cover);
  background-attachment: fixed;
  filter:blur(6px);
  width:500px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
  position:absolute;
  @include box-sizing(border-box);
  color: transparent;
  &.with-text {
    color: white;
    opacity: .5;
    filter: none;
    background: grey;
  }
}

筆： https ： //codepen.io/anon/pen/BxgyNR ？

Answer 3

將模糊過濾器添加到#pp css（.name類中使用的img id）並將其從name-bg中移除（這會影響整個背景）。 這對你來說應該更好。 10px可能有點多。 我預覽了它（見圖）

希望這可以幫助

編輯：

仔細查看你的代碼（並查看你的評論，澄清了問題）后，你已經在名稱容器周圍設置了0自動邊距，並且name-bg class已經被這個大小調整了（它被改變了添加了頂部/右側/底部/左側坐標）我將頂部/右側/左側/底部調整為2或-2（參見小提琴），這減小了背景div的大小。 我還將定位更改為relative ，因此在調整大小時，它仍然會出現在中間。

https://jsfiddle.net/RachGal/rhav95o1/ ：小提琴

我認為這更接近你所尋找的。

Answer 4

backdrop-filter: blur(10px);

它會模糊元素背后的區域。