Question

所以，我在Photoshop中设计了一个网站并将网站导出为HTML＆amp;图片。我把它搞砸了一下，然后把菜单项点击下来，当你盘旋时，文字就会改变，还有一些类似的东西。

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

代码：

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

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

1 个答案: