使用CSS与图像

样式化您的图像并在样式中使用图像

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

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

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

img {
边框：1px纯黑色;
填充：5px;
}

如有可能，始终链接非装饰图像是一个不错的主意。但是当你这样做时，请记住大多数浏览器在图像周围添加了一个彩色边框。即使您使用上述代码更改边框，链接也会覆盖该边框，除非您移除或更改链接边框。为此，您应该使用CSS子规则删除或更改链接图像周围的边框：

img> a {
border：none;
}

您还可以使用CSS来更改或设置图像的高度和宽度。虽然由于下载速度而使用浏览器调整图像大小并不是一个好主意，但它们在调整图像大小方面变得更好，因此它们仍然很好看。使用CSS，您可以将图像设置为标准宽度或高度，甚至可以将尺寸设置为相对于容器。

请记住，当您调整图像大小时，为了获得最佳效果，您只应调整一个维度 - 高度或宽度。这将意味着图像保持其高宽比，所以看起来并不奇怪。将其他值设置为自动或将其忽略以告知浏览器保持纵横比一致。

img {
宽度：50％;
身高：自动;
}

CSS3通过新的属性object-fit和object-position为这个问题提供了一个解决方案。使用这些属性，您将能够定义确切的图像高度和宽度以及应如何处理高宽比。这可能会在您的图像周围创建letterboxing效果，或者裁剪以使图像适合所需的大小。

尽管CSS3对象适合度和对象位置属性尚未得到广泛支持，但在大多数现代浏览器中都可以使用其他CSS3属性，这些属性可用于修改图像。诸如阴影，圆角以及旋转，倾斜或移动图像等现在在大多数现代浏览器中都可以正常工作。然后，您可以使用CSS转换来使图像在盘旋，单击或稍后一段时间后更改。

CSS可以很容易地创建你的图像花哨的背景。

您可以将背景添加到整个页面或仅添加特定元素。使用background-image属性在页面上创建背景图像很容易：

身体 {
background-image：url（background.jpg）;
}

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

你可以用图像做的另一件有趣的事情是创建一个不会随着页面其余部分滚动的背景图像 - 就像水印一样。您只需使用样式background-attachment：fixed; 连同你的背景图片。其他背景选项包括使用背景重复属性将它们水平或垂直平铺。

写背景重复：repeat-x; 水平平铺图像和background-repeat：repeat-y; 垂直平铺。您可以使用background-position属性定位您的背景图像。

而且CSS3为您的背景添加了更多样式。您可以拉伸您的图像以适应任何尺寸的背景，或设置背景图像以随窗口大小缩放。您可以更改位置，然后剪切背景图像。但关于CSS3的最好的事情之一是，你现在可以分层多个背景图像来创建更复杂的效果。

HTML5中的图形元素应放置在任何可以独立存在于文档中的图像周围。想一想的一种方法是如果图像可能出现在附录中，那么它应该在图形元素内。然后，您可以使用该元素和FIGCAPTION元素为您的图像添加样式。

Alike posts