likes
comments
collection

你需要知道的 CSS 技巧:图片篇

作者站长头像
站长
· 阅读数 13

这是 CSS 进阶指南系列文章,本文主要介绍了 CSS 中处理图片时容易被忽略的细节,通过阅读本文,你将学习处理图片失真、背景图片重复、图片上的文字、图片内边框等内容。

CSS 进阶指南系列文章:

图片失真

有时候我们需要展示的是用户上传的图片,所以宽高比很可能是不一致的,我们也很难去控制宽高比。这个例子中,看上去是没有问题的。它的图片比例是 1:1。你需要知道的 CSS 技巧:图片篇但是当用户上传了不同尺寸的图片时,它会被拉伸。你需要知道的 CSS 技巧:图片篇实际上用户上传的图片时这样的你需要知道的 CSS 技巧:图片篇解决这个问题的最简单方案是使用 object-fit 属性,值设置为 cover。你需要知道的 CSS 技巧:图片篇这样它就可以确保图片不会被拉伸。

背景图片重复

我们使用大图片作为背景图时,偶尔会忘记考虑在不同屏幕上的显示情况。在我们预期的屏幕上,图片的显示可能是这样。你需要知道的 CSS 技巧:图片篇但是在大屏幕上,它的显示可能是这样。你需要知道的 CSS 技巧:图片篇为了避免这种情况,我们可以使用 background-repeat,把它的值设置为 no-repeat。这样它就不会出现背景图片重复的现象了。同时我们可以使用 background-color 设置背景色,使用 background-size 来决定背景图的宽高占比。

图片上的文字

这是一个在图片上悬浮的文字。你需要知道的 CSS 技巧:图片篇当发生意外图片没有被加载出来时,会出现下面这张现象。你需要知道的 CSS 技巧:图片篇这是添加了文字阴影的效果,如果没有添加文字阴影,页面将会空白。解决这种问题的办法是给图片设置能和文字形成对比的背景色。比如文字是白色,那就把图片的背景色设置成深灰色。你需要知道的 CSS 技巧:图片篇

图片内边框

在处理用户头像时,我们应该用清晰的方式显示它们。有些头像边缘的颜色非常亮,会和背景融为一体,特别是边缘有白色背景的头像。你需要知道的 CSS 技巧:图片篇通过上面两张头像的对比,我们可以看到右侧小猫头像显示的尺寸会比实际头像的尺寸小很多,因为小猫头像的图片周围本身就带有白色背景,和页面的背景混合了。这样对用户来说很不好。解决方式是给图片添加内边框。注意是内边框而不是边框。下面这是添加了边框的效果。你需要知道的 CSS 技巧:图片篇下面是添加内边框的效果。你需要知道的 CSS 技巧:图片篇仔细观察,边框的颜色会跟随图像边缘的颜色,而不是纯色。我们甚至可以用它去适配暗色主题。你需要知道的 CSS 技巧:图片篇这是使用边框做不到的。但是,在 CSS 中为 img 元素添加内边框是做不到的。所以,我们需要将 img 包裹到一个容器元素中,并在容器元素里面添加内边框。

<div class="card__avatar">
  <img src="image.jpg" alt="" />
  <div class="border"></div>
</div>
.card__avatar {
  position: relative;
}

.card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.border {
  position: absolute;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 2px solid #000;
  border-radius: 50%;
  opacity: 0.1;
  top: 0;
  left: 0;
}

如果你对 CSS 的内容感兴趣,欢迎关注我的新专栏 CSS 进阶指南,让我们一起成长。