Photoshop Slices - 在图像上添加对象

Question

所以，我在 Photoshop 中设计了一个网站，并将网站导出为 HTML 和图像。我把它弄乱了一点，让它可以点击菜单项，当你悬停时，文本会改变，诸如此类的小东西。

我想知道的是，我如何才能拥有一个基本上只是具有随机颜色的图像的切片，并且能够在其上放置按钮或文本之类的东西。

代码：

<td colspan="3">
    <img src="images/index_17.png" width="395" height="90" alt=""></td>

这是一个特定切片的示例，我想在上面放置文本并能够随时更改文本。

以前有没有人这样做过，或者知道如何在不弄乱所有图像的情况下轻松做到这一点？

Answer 1

如果您想定位特定单元格来放置和设置内容样式，最好的办法是在代码中通过给它一个唯一 id 来调用它。一旦您的元素有了 ID，您就可以使用 CSS 专门影响您放置在其中的元素。

因为您在 Photoshop 中使用切片工具，所以默认情况下它会将切片图像添加到表格单元格中。在您可以在其中放置文本之前，您必须将该插入的图像移动为背景图像。需要注意的是，一旦你这样做了，TD 元素将不知道它应该是什么大小，所以你必须明确地将它设置为你正在移动的图像的大小。

例如，使用您发布的代码，您可以执行以下操作：

table {
  border: 1px dotted #333;
  border-collapse: collapse;
  }
td {
  border: 1px solid #999;
  padding: 10px;
  background-color: #ededed;
  }

/* Anything in that cell you would like styled, prepend it with the ID you gave the cell */

td#styled-cell {
  height: 90px;
  width:395px;
  /*background-image: url("images/index_17.png"); */ /*Uncomment this line and update this URL to match where you have your images in relation to your CSS file */
  background-color: #999;
  }

td#styled-cell h2 {
  font-size: 20px;
  text-align: center;
  color: lightblue;
  text-transform: uppercase;
  }

td#styled-cell p {
  font-size: 12px;
  text-align: center;
  color: white;
  }

td#styled-cell a,
td#styled-cell a:link {
  font-size: 14px;
  color: pink;
  }

td#styled-cell a:visited,
td#styled-cell a:hover,
td#styled-cell a:active {
  color: red;
  text-decoration: underline;
  }

<table>
  <tr>
    <td>
        <!-- This is just to show you how it looks in a table, these would be replaced by the other rows and cells photoshop created -->
        Other Example Cell
    </td>
    <td colspan="3" id="styled-cell">
      <h2> Example Styled Text</h2>
      <p> This is an <a href="#"> Example Link</a></p>
      <p>Example Paragraph with no link.</p>
    </td>
  </tr>
</table>