Question

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

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

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

我该如何解决这个问题？

我的css到目前为止：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 图片

Answer 1

你确实可以使用多个背景并从html开始......如果我明白你在找什么：

＆＃13;

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

＆＃13;

<div>to demonstrate content</div>

＆＃13;

设置多个背景（页面底部的图片和其他部分的颜色）

1 个答案: