使用 css 中的背景图片以及页面中央的白色背景

Question

我正在使用此代码将图像用作 <body> 标签内的背景

body {
   margin: 0; auto;
   font-family: Arial, Helvetica, sans-serif;
   background-image: url('image-blur.png');
   background-repeat: no-repeat;
   display: table-cell;
   vertical-align: middle;
   opacity:1;
}

但是图像覆盖了页面的白色背景。我希望图像仅覆盖在 html 页面的左侧和右侧。在页面中心存在数据。我需要在数据区域保持白色背景，但同时将图像用作固定背景。我怎样才能做到这一点？任何帮助表示赞赏。

Answer 1

这是该布局的一种可能实现方式：注意：所有颜色、尺寸和图像仅用于演示目的。根据您的需要调整它们。

https://codepen.io/nakata/pen/LQddvz

<div class="main">
  <div class="image"></div>
  <div class="content">Stuff</div>
</div>

body {
  margin: 0;
}

.main {
  height: 100vh;
  width: 100vw;
  background: red;
  display: flex;
  justify-content: center;
  align-items:center;
  z-index: 2;
  position: relative;
}

.image {
  background-image: url('https://placekitten.com/200/200?image=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  width: 1500px;
  position: absolute;
  z-index: -1;
}

.content {
  background: #fff;
  height: 500px;
  width: 800px;
}

Answer 2

您可以简单地使用多个背景：

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: 
  linear-gradient(to right,transparent 20%, white 20%, white 80%,transparent 0)
  ,url('https://lorempixel.com/1000/1000/');
  min-height:100vh;
}

使用 css 中的背景图片以及页面中央的白色背景

Use background image in css along with white color background in center of page

html

css

background

background-image