Question

 <style>
 #text{
 background-image:url('/../image.jpg');
 <<image-resolution:???>>
 }
 </style>

我有CSS我使用图片作为背景。 [width = 5000p, height = 3000px, horizontal and vertical resolution = 72dpi] 图像显示的尺寸非常大，而图片并未完全覆盖屏幕。有没有办法可以使用image-resolution或任何其他方法更改图像的大小/分辨率？

Answer 1

首先，图像分辨率标签属于css3，所有浏览器可能都不支持此功能，但如果您想这样做，请尝试提供如下图像分辨率：

<style>
image-resolution: 72dpi; 
</style>

一切顺利......

Answer 2

您应该可以使用background-size CSS property来更改图片的大小。

 #text{
     background-image:url('/../image.jpg');
     background-size: 100px 100px;
 }

Answer 3

Tiffon给了你正确的答案。但在“现实世界”中，你永远不会在重复背景中使用如此大的图像。

典型尺寸例如：

200px X 200px（重复）
10px X 1000px（repeat-x）
2000px X 10px（repeat-y）

当然，你还要考虑图像的重量：40 / 50Kb可能是最大尺寸。

总之，我建议你不要使用css规则来调整图像的大小和压缩（JPG压缩，从50％到80％）。你可以使用Paint或FastStone Resizer等软件来做到这一点，这是一个非常实用的免费软件。

在html中更改图像分辨率

3 个答案: