Question

如果有任何空间和蓝色背景，我希望图像中间有一个固定的包含图像和左边的绿色背景。

这是我到目前为止所得到的（问题不在于图像，而是左右两个单独的背景;如果我将左边的颜色改为bmp，尺寸为200px（600px）和高度1和repeat-y这也可以在图像的右侧看到，或者不会覆盖图像左侧的所有空间）：请注意，我可以在99％的情况下解决此图像，但我有不同比例的图像来处理...

<!DOCTYPE html>
<html>

<head>
  <title>Lab 2</title>
  <style>
    body {
      background: #546436
      /*#6096ec*/
      url('https://lilaum.com/pic/jaka.jpg' no-repeat fixed center center;
      background-size: contain;
    }
  </style>
</head>

<body>
  <pre>
    more
    to 
    do

    Please help me, smth like to repeat just to 50% of page should be perfect, thanks, Grega from Slovenia
    </pre>
</body>

</html>

Answer 1

使用多个背景和线性渐变

html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  background-image: url('https://lilaum.com/pic/jaka.jpg'), linear-gradient(to right, #546436 50%, #6096ec 50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain, cover;
  background-attachment: fixed;
  height: 100%;
}

Answer 2

您可以使用渐变和背景图像。

看到这个工作小提琴：https://jsfiddle.net/ged4sj35/

body {
  background-image: url("https://lilaum.com/pic/jaka.jpg"), 
  -webkit-linear-gradient(left, red, red 50%, blue 50%, blue);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: contain;
}

完美的三部分css背景

2 个答案: