设置多个背景（页面底部的图片和其余颜色）答案

【问题标题】：Setting multiple backgrounds (picture at bottom of page and colour for the rest)设置多个背景（页面底部的图片和其余颜色）
【发布时间】：2016-03-23 23:20:28
【问题描述】：

我有一张左右边距的图片，中间有颜色过渡（底部为灰色，顶部为黑色）。

我希望将页边距设置为 2 个单独的图像文件和第三个中间颜色过渡的图像（从一侧拉伸到另一侧）。目的是防止侧面图像被拉伸变形。

我的网站大部分都在一个 div 中，所以当我添加图片时，它们会出现在内容下方，它们之间只有白色。作为一种解决方法，我在那里有一个单一的图像背景，但它总是被拉伸变形并且看起来非常糟糕。

我该如何解决这个问题？

到目前为止我的 CSS：

   img#left {
     position: absolute;
     margin: 0% 88% 0% 1%;
   }
   img#right {
     position: absolute;
     margin: 0% 1% 0% 88%;
   }
   img {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }

<table id='toolbar' width='100%' border='1px'>
  <tr>
    <td width='15%'>
      <a href='index.php'>
    HOME</a>
    </td>
    <td width='15%'>
      <a href='gamesearch.php'>
    FIND A GAME</a>
    </td>
    <td width='15%'>
      <a href='leaderboards.php'>
    LEADERBOARDS</a>
    </td>
    <td width='15%'>
      <a href='playerstats.php'>
    MY STATS</a>
    </td>
    <td width='15%'>
      <a href='contact.php'>
    CONTACT US</a>
    </td>
    <td width='12%'>LOGGED IN AS John Smith</td>
    <td width='15%'>
      <a href='logout.php'>
    LOGOUT</a>
    </td>


  </tr>
</table>
</div>
<div id="uptlogo">
  <img src="UPT logo.jpg">
  </image>
</div>

<body>
  <div class='sub'>
    <h1> Login </h1>
    <form action='playerlogin.php' method='post'>
      <input required type='hidden' name='formtype' value='login'>
      <br>

      <input placeholder='Username' name='username'></input>
      <br>
      <input placeholder='Password' name='password'></input>
      <br>
      <input type='submit' value='Sign in'></input>
    </form>
    <h1> Sign up </h1>
    <form action='playerlogin.php' method='post'>
      <input required type='hidden' name='formtype' value='player'></input>
      <input required name='firstname' placeholder='First 
    
    Name'></input>
      <input required name='surname' placeholder='Surname'></input>
      <br>
      <input type='password' name='password' placeholder='Password'></input>
      <br>
      <input required placeholder='Phone' name='phone' type='number'></input>
      <select name='gender'>
        <option value='Male'>- Gender -</option>
        <option value='male'>Male</option>

        <option value='female'>Female</option>
      </select>
      <br>
      <input required placeholder='E-Mail' type='email' name='email'></input>Your login details will be sent to this email address.
      <br>
      <input type='submit' value='Sign 
    
    up'></input>
    </form>
  </div>
  <img id="left" src="UPT side.jpg">
  </image>
  <img id="right" src="UPT side.jpg">
  </image>

图片

【问题讨论】：

你也可以给我们HTML吗？最好是codepen或fiddle和可用的图像链接；）为了给你一些提示和答案
HTML 现已添加到问题中。我不知道如何在这里上传照片。
您可以使用图片图标上传它们，您应该会看到一个模式，然后只需拖放图片即可
谢谢 :) 我已经添加了。基本上，我希望那张图片位于左下角和右下角，并且“淡入黑色”颜色图案应该填补两张图片之间的空白。

标签： css image background background-image background-color

【解决方案1】：

您确实可以使用多个背景并从 html 开始，...如果我理解您在寻找什么：

html {
  min-height: 100%;
  background: linear-gradient(to left, transparent 12%, gray 12%, gray 88%, transparent 88%), url(http://i.stack.imgur.com/FVSOQ.jpg) bottom left repeat-y, url(http://i.stack.imgur.com/FVSOQ.jpg) bottom right repeat-y
  /* set first value of background-position to your needs, update your gradient too */
  ;
  background-size: 100% 100%, 12% auto, 12% auto;
  background-color: #000;
}
body {
  margin: auto;
  width: 76%;
}
/* to demonstrate where content stands */

div {
  box-shadow: inset 0 0 0 1px white;
}

&lt;div&gt;to demonstrate content&lt;/div&gt;

【讨论】：