Photoshop 切片 - 在图像上添加对象

Question

所以，我在 Photoshop 中设计了一个网站，并将该网站导出到 HTML & Images。我稍微弄乱了它，使菜单项可以点击，当你悬停时，文本会改变，诸如此类的小事情。

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

代码：

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

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

有没有人以前做过这个或者知道如何轻松地做到这一点而又不会弄乱所有图像？

Answer 1

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

因为您使用的是 Photoshop 中的切片工具，它默认会将切片图像添加到 table 单元格中。在您可以在其中放置文本之前，您必须将插入的图像移动为背景图像。需要注意的是，一旦你这样做，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>

Photoshop 切片 - 在图像上添加对象

Photoshop Slices - Add Objects over Images

html

css

photoshop