Question

我正在尝试制作一个透明的固定标题没有JS但只有CSS 。我有一个示例，其中使用::before来模糊具有负z-index的基质。

https://jsfiddle.net/VeryDeepSky/w8a93wpu/

但是我失败了......这么多次......同时，我已经知道如何用 jQuery 做到这一点。我正在寻找CSS解决方案。有人可以帮忙吗？

谢谢！

P.S。这就是我要做的事。

https://jsfiddle.net/VeryDeepSky/81f7wcwh/6/

Answer 1

我找到了背景图片的解决方案，但我不知道如何将模糊效果应用于标题下的所有元素。

＆＃13;

/**
     * {@inheritDoc}
     */
    protected function setUp()
    {
        // Initiates client
        $this->client = static::createClient();

        $this->container = $this->client->getContainer();
        $this->application = new Application($this->client->getKernel());
        $this->application->setAutoExit(false);
        $this->translator = $this->container->get('translator');
        $this->em = $this->container
            ->get('doctrine')
            ->getManager();
    }

＆＃13;

.content:before {
  content: '';
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: -5px;
  height: 100px;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.content {
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  background-attachment: fixed;
  left: 0;
  right: 0;
  width: 1200px;
  height: 800px;
}
p:first-child {
  padding-top: 100px;
}

＆＃13;

透明模糊固定块与css

1 个答案: