html - 如何在背景CSS属性中拉伸(stretch)图像

标签 html css

我使用以下 css 属性在标题中显示 Logo :

background: url("images/ogo_b_s.gif") no-repeat scroll left top transparent
height: 92px;
width: 300px;

问题是我的原始图像质量很高 (4325 X 1450)。但是,为了使该图像适合上述 css 宽度和高度,我必须将图像缩小到 (257 X 87),这会显着降低图像质量。如此之多,以至于图像中的字体也开始看起来很奇怪。

这张图片有透明背景,放在另一张图片之上。

我想知道是否有一些方法可以不缩小图像并使其适合上面的 css?

最佳答案

两件事:

  1. 没有 CSS 比例图像。它在这方面做得很差。使用一些程序缩放图像,该程序旨在自行缩放到您想要的尺寸。然后 CSS 不需要做任何事情。
  2. 4325 x 1450 很大!你希望有人必须下载整个东西才能看到它的小规模吗?如果您按照 #1 中的建议重新缩放图像,这将使您的用户不必加载整个巨大的图像(并为您节省一些带宽)。

关于html - 如何在背景CSS属性中拉伸(stretch)图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3895258/

相关文章:

javascript - 将一个日期选择器中的 6 个月添加到另一个日期选择器

jquery - 同时选择两个单选按钮

jQuery 点击函数改变正文溢出属性

javascript - 样式 Umbraco @Umbraco.GetDictionaryValue

html - 使用 flexbox,垂直居中元素并尊重 flexbox 容器的顶部 150px 空间

html - 具有固定列宽的流体 flexbox 网格

javascript - vue 进入过渡无法正常工作

javascript - 无法使 CORS 请求正常工作

javascript - JqueryUI droppable 'out' 事件不会触发

html - 定位:固定不固定?