许多人使用CSS来调整文本，更改字体，颜色，大小等。但是很多人经常忘记的一件事是你也可以将CSS与图像一起使用。
改变形象本身
CSS允许您调整图像在页面上的显示方式。这对于保持页面一致非常有用。通过在所有图像上设置样式，可以为图像创建标准外观。你可以做的一些事情：
- 在图像周围添加边框或轮廓
- 删除链接图像周围的彩色边框
- 调整图像的宽度和/或高度
- 添加投影
- 旋转图像
- 图像悬停时更改样式
给你的形象一个边界是一个很好的起点。但是你应该考虑的不仅仅是边界 - 考虑图像的整个边缘并调整边距和填充。带有黑色细边框的图像看起来不错，但在边框和图像之间添加一些填充可能看起来更好。
img { 边框：1px纯黑色; 填充：5px;}
在可能的情况下，始终链接非装饰图像是个好主意。但是当你这样做时，请记住大多数浏览器在图像周围添加彩色边框。即使您使用上述代码更改边框，链接也将覆盖该链接，除非您也删除或更改链接上的边框。为此，您应该使用CSS子规则来删除或更改链接图像周围的边框：
img> a { border：none;}
您还可以使用CSS更改或设置图像的高度和宽度。虽然由于下载速度而使用浏览器来调整图像大小并不是一个好主意，但是它们在调整图像大小方面变得更好，这样它们看起来仍然很好。使用CSS，您可以将图像设置为标准宽度或高度，甚至可以将尺寸设置为相对于容器。
请记住，当您调整图像大小时，为了获得最佳效果，您应该只调整一个尺寸 - 高度或宽度。这将使图像保持其纵横比，因此看起来并不奇怪。将另一个值设置为 汽车 或者留下来告诉浏览器保持纵横比一致。
img { 宽度：50％; 身高：自动;}
CSS3通过新属性提供了解决此问题的方法 对象的合 和 对象的位置。使用这些属性，您将能够定义精确的图像高度和宽度以及应如何处理纵横比。这可能会在图像周围创建信箱效果或裁剪以使图像适合所需的大小。
而CSS3 对象的合 和 对象的位置 属性尚未得到广泛支持，大多数现代浏览器都支持其他CSS3属性，您可以使用这些属性来修改图像。在大多数现代浏览器中，诸如投影，圆角以及旋转，倾斜或移动图像的转换现在都能正常工作。然后，您可以使用CSS过渡使图像在悬停，或单击时或在一段时间后更改。
使用图像作为背景
CSS可以轻松地为您的图像创建精美的背景。您可以将背景添加到整个页面或仅添加到特定元素。使用。在页面上创建背景图像很容易 背景图片 属性：
身体 { background-image：url（background.jpg）;}
改变 身体 选择器到页面上的特定元素，将背景放在一个元素上。
你可以用图像做的另一个有趣的事情是创建一个背景图像，它不会与页面的其余部分一起滚动 - 就像水印一样。你只需使用这种风格 背景附件：固定; 以及您的背景图片。您的背景的其他选项包括使用它们使它们水平或垂直平铺 背景重复 属性。写 background-repeat：repeat-x; 水平平铺图像 background-repeat：repeat-y; 垂直平铺。你可以用你的背景图像定位 背景位置 属性。
CSS3也为您的背景添加了更多样式。您可以拉伸图像以适合任何大小的背景，或者将背景图像设置为与窗口大小一致。您可以更改位置，然后剪切背景图像。但是关于CSS3的最好的事情之一就是你现在可以分层多个背景图像来创建更复杂的效果。
HTML5帮助风格图像
该 数字 HTML5中的元素应放置在可以独立于文档中的任何图像周围。想一想的一种方法是，如果图像出现在附录中，那么它应该在阑尾内 数字 元件。然后，您可以使用该元素和 FIGCAPTION 元素为图像添加样式。
