许多人使用CSS来调整文本，改变字体、颜色、大小等等。但是很多人经常忘记的一件事是，您也可以将CSS用于图像。

更改图像本身

CSS允许您调整图像在页面上的显示方式。这对于保持页面的一致性非常有用。通过在所有图像上设置样式，可以为图像创建标准外观。您可以做的一些事情：

• 在图像周围添加边框或轮廓
• 删除链接图像周围的彩色边框
• 调整图像的宽度和/或高度
• 添加阴影
• 旋转图像
• 将图像悬停在上方时更改样式

给你的图像添加边框是一个很好的开始。但你应该考虑的不仅仅是边界-想想你的图像的整个边缘，调整边缘和填充。带有薄黑色边框的图像看起来很不错，但是在边框和图像之间添加一些填充可以看起来更好。

如果可能，最好始终链接非装饰性图像。但是，当您这样做时，请记住，大多数浏览器都会在图像周围添加彩色边框。即使您使用上述代码更改边框，链接也将覆盖该代码，除非您同时删除或更改链接上的边框。为此，应使用CSS子规则删除或更改链接图像周围的边框：

您还可以使用CSS更改或设置图像的高度和宽度。虽然由于下载速度的原因，使用浏览器调整图像大小不是一个好主意，但他们在调整图像大小方面做得越来越好，这样图像看起来仍然不错。使用CSS，您可以将所有图像设置为标准宽度或高度，甚至可以将尺寸设置为相对于容器。

请记住，调整图像大小时，为获得最佳效果，应仅调整一个尺寸（高度或宽度）。这将确保图像保持其纵横比，因此看起来不奇怪。将另一个值设置为“自动”或将其忽略，以告知浏览器保持纵横比一致。

CSS3通过新属性“对象拟合”和“对象位置”提供了解决此问题的方法。使用这些属性，您将能够定义精确的图像高度和宽度以及应如何处理纵横比。这可能会在图像周围创建字母盒效果，或进行裁剪以使图像符合所需大小。

大多数浏览器都支持其他CSS3属性，您也可以使用这些属性修改图像。像放置阴影、圆角和旋转、倾斜或移动图像的变换，现在都可以在大多数现代浏览器中使用。然后，当鼠标悬停、单击或一段时间后，您可以使用CSS转换来更改图像。

使用图像作为背景

CSS可以轻松地用图像创建精美的背景。您可以将背景添加到整个页面或仅添加到特定元素。使用“背景图像”属性在页面上创建背景图像很容易：

将主体选择器更改为页面上的特定元素，以便将背景仅放在一个元素上。

另一个有趣的事情，你可以做的图像是创建一个背景图像，不与页面的其余部分滚动-像水印。您只需使用样式背景附件：固定；以及您的背景图像。其他用于背景的选项包括使用“背景重复”属性使背景仅水平或垂直平铺。写入背景重复：repeat-x；要水平平铺图像和背景，请重复：repeat-y；垂直平铺垂直平铺。您可以使用background position属性定位背景图像。

CSS3也为您的背景添加了更多样式。您可以拉伸图像以适应任何大小的背景，或将背景图像设置为随窗口大小缩放。可以更改位置，然后剪裁背景图像。但是CSS3最棒的一点是，现在您可以将多个背景图像分层，以创建更复杂的效果。

html5有助于设计图像样式

HTML5中的FIGURE元素应该放在文档中任何独立的图像周围。一种思考方法是，如果图像可以出现在附录中，那么它应该在FIGURE元素中。然后可以使用该元素和FIGCAPTION元素向图像添加样式。