Question

我的身体和侧边栏都有背景图片，同样的。在侧边栏上显示它的原因是后者创建模糊效果，因此我需要侧边栏中的部分图像与身体中的一个完美匹配。

忽略侧边栏中图像较暗的事实，无论窗口调整大小，它们都应该完美对齐，我尝试了各种尝试，但是我无法弄清楚这一点。

相关代码：

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #2B3540;
      background-image: url(https://s3-eu-west-1.amazonaws.com/ilja.io/images/background.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    #sidebar {
      width: 100%;
      max-width: 400px;
      height: 100%;
      background-color: rgba(43, 53, 64, 0.7);
      position: relative;
      overflow: hidden;
      left: 0;
    }

    #sidebar::before {
      background-image: url(https://s3-eu-west-1.amazonaws.com/ilja.io/images/background.jpg);
      background-size: cover;
      content: '';
      position: relative;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -5;
      display: block;
      /*-webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);*/
    }

其中#sidebar只是正文中的<aside>元素。

我最初的方法是模糊侧边栏，但是会产生完全不同的效果，因此我需要使用具有相同背景图像的::before元素并将其模糊化。

Answer 1

我不确定这是否可以接受，但确实排成一行

body {
  ...
  background-position: left center;
  ...
}

否则，我建议使用视口单元正确定位左侧边栏背景。

Alining在窗口调整大小时更改的2个背景图像（背景大小：封面）

1 个答案: