Question

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

图片示例：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

有谁知道如何简化这个结果？

Answer 1

Svg为

由于您使用的是svg，因此您可以直接使用该内联如果你把它放在内联中就像我在下面的例子中所做的那样您可以使用css更改svg中的所有颜色。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

CSS Gradient

我的方法，渐变背景： 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;
}

在CSS的分裂颜色背景的居中的图象

2 个答案:

Svg为

CSS Gradient