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

componentDidMount() {
    const rootRef = firebase.database().ref();
    const speedRef = rootRef.child('react');

    speedRef.once("value", snap => {
        // Handle state
        let speedsUrls = []
        snap.forEach(child => {
            speedsUrls.push(child.val())
        });
        this.setState({speed: speedsUrls})
    });
}

render() {
    const SpeedURLS = this.state.speed.map(url => <h1>URL: {url}</h1>);
    return (
        <div>
            {SpeedURLS}
        </div>
    );
}

它将模糊元素后面的区域。

在Div CSS背后模糊

4 个答案: