CSS中的分割颜色背景居中图像答案

【问题标题】：Centered image over split color background in CSSCSS中的分割颜色背景居中图像
【发布时间】：2016-01-12 11:09:57
【问题描述】：

我已经找到了如何在彩色背景上制作图像，但当你有两个时却没有。我只想将一个图像居中在屏幕/页面的中间，并且我希望它随着窗口大小而缩小。

图片示例：

body {
  font-family: 'Titillium Web', sans-serif;
}
#top,
#bottom {
  background: url('http://uxrepo.com/static/icon-sets/zocial/svg/chrome.svg') no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
}
#top {
  top: 0;
  background-color: #ff0000;
}
#bottom {
  bottom: 0;
  background-color: #fff38f;
}
.header-container {
  height: 130px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 130px;
}
.header {
  text-align: center;
  line-height: 16px;
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}
.footer-container {
  height: 130px;
  width: 99%;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
}
.footer {
  text-align: center;
  line-height: 16px;
}
.img {
  position: absolute;
  width: 100%;
}

<body>

  <div id="top">
    <div class="header-container">
      <div class="header">
        SOME TITLE
      </div>
    </div>
  </div>

  <div id="bottom">

    <div class="footer-container">
      <div class="footer">
        some text
        <br>
        <br>some text
        <br>some text
        <br>some text
      </div>

    </div>
  </div>

</body>

有谁知道如何使这个结果变得简单？

【问题讨论】：

你能再解释一下吗？我不明白想要的结果以及当前代码有什么问题？
上面的结果将图像分成背景的两部分，因为我在#top, #bottom {...} 中有它，但我希望只有一张图像出现在屏幕上并居中在页面中间。
所需结果的图像会很有帮助，并且会增加请求的清晰度。
我在上面的帖子中添加了一个图片示例。

标签： html css image background layer

【解决方案1】：

Svg

由于您使用的是 svg，因此您可以简单地使用该内联。
如果您像我在下面的示例中所做的那样将它内联。
您可以使用 css 更改 svg 中的所有颜色。

svg {
  height: 100vh;
}
#rect1 {
  fill: firebrick;
}
#rect2 {
  fill: #229;
}

<div>
  <svg viewBox="0 0 500 400">
    <rect id="rect1" x="0" y="0" width="1000" height="200" />
    <rect id="rect2" x="0" y="200" width="1000" height="200" />
    <g transform="translate(150,100) scale(0.2)">
      <path d="M0 523q0-75 23-155.5t62-144.5q62-104 182.5-163.5t248.5-59.5q130 0 249.5 81.5t182.5 201.5q50 86 50 214 0 150-71 266t-192 177-270 60q20-36 61-109.5t73.5-130.5 64.5-108l1-2q3-5 12-18.5t12.5-19.5 9.5-17 9.5-21 5.5-21q6-24 6-48 0-80-48-142l275-81q-285 0-428 1-7-1-22-1-99 0-165.5 74t-55.5 173q-2-9-2-28 0-44 15-77l-204-201 198 341q19 72 79.5 117.5t134.5 45.5q17 0 33-3l-66 276q-115 0-223-71t-175-176q-66-102-66-230zm312-19q0 77 54.5 131.5t130.5 54.5 130.5-54.5 54.5-131.5q0-76-54-130.5t-131-54.5-131 54.5-54 130.5z"
      />
    </g>

  </svg>
</div>

【讨论】：

好吧，我不想要一个固定的宽度，而是一个动态的 - 宽度：100% 高度：100%。
这是一个示例，您可以将 svg 的宽度设置为 height:100%
Nono 实际上我希望我的分割背景为 100%，知道如何在您的示例中做到这一点吗？
你想用它作为网站背景吗？
是图片和彩色背景。

【解决方案2】：

CSS 渐变

我的方法，渐变背景：JSFiddle

<div class="background">
    <img src="source"/>
</div>

.background{
    background: linear-gradient(to bottom,  #db6062 0%,#db6062 50%,#db6062 50%,#dae27a 50%,#dae27a 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.background img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 200px;
    margin: auto;
}

【讨论】：