如何参考背景图片？ [关闭]

Question

我正在制作一个网页，并且想要对我的身体background-image属性应用Blur滤镜，为此我需要引用background-image属性，这可能吗？

Answer 1

您必须使用两个不同的div，一个用于背景图像，另一个用于将要插入的数据。

请参阅下面的示例，其中我创建了两个div-

1. 。背景
2. 。数据

两者都放置在以下position: fixed和left: 0; right: 0; left: 0; right: 0; 。 显示它们的区别来自为元素设置不同的z-index值。

的HTML

<div class="background-image"></div>
<div class="content">
    <p>Hello World</p>
    <p>New Paragraph</p>
</div>

的CSS

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;

  display: block;
  background-image: url('https://www.google.co.in/logos/doodles/2015/mf-husains-100th-birthday-5102553322749952.2-hp.jpg');
  width: 1200px;
  height: 800px;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}