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

·  阅读 900
你需要知道的 CSS 技巧:图片篇

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 8 天,点击查看活动详情

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

CSS 进阶指南系列文章:

图片失真

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

背景图片重复

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

图片上的文字

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

图片内边框

在处理用户头像时,我们应该用清晰的方式显示它们。
有些头像边缘的颜色非常亮,会和背景融为一体,特别是边缘有白色背景的头像。
image.png
通过上面两张头像的对比,我们可以看到右侧小猫头像显示的尺寸会比实际头像的尺寸小很多,因为小猫头像的图片周围本身就带有白色背景,和页面的背景混合了。这样对用户来说很不好。
解决方式是给图片添加内边框。
注意是内边框而不是边框。
下面这是添加了边框的效果。
image.png
下面是添加内边框的效果。
image.png
仔细观察,边框的颜色会跟随图像边缘的颜色,而不是纯色。
我们甚至可以用它去适配暗色主题。
image.png
这是使用边框做不到的。
但是,在 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 进阶指南,让我们一起成长。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改