如何用 CSS 为损坏的图片添加样式

损坏的图片确实很丑，但我们可以调整它们的样式，以提供更好的用户体验。
以下是我们今天要创建的内容：

但在开始之前，让我们仔细看看图像的行为方式。

1.我们可以将排版样式应用于图像。

它们将被应用于替代元素。

2. 您可以在损坏的图像上使用伪元素。

通常::before 和::after 元素对图像不起作用，但是，当未加载图像时，这些元素就会出现。

让我们进入有趣的部分。

创建一个图像标签并设置一个损坏的 URL 和一个 alt 属性。



<img src="https://imag.unsplash.com/photo-1509021436665-8f07dbf5bf1d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" alt="Good book">

这是我们在浏览器中得到的结果：

为图像元素本身应用样式。



img {
     display: inline-block;
     font-family: Arial, sans-serif;
     font-weight: 300;
     line-height: 2;
     text-align: center;

     min-width: 300px;
     min-height: 50px;
     position: relative;
}

添加 ::before 元素来为损坏的图像创建背景



img::before {
     content: '';
     width: 100%;
     height: calc(100% + 10px);
     background-color: #ccc;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: -2px;
     transform: translateY(-50%);
 }

以下是浏览器渲染的内容

在此之后添加::after元素来创建文本和图标。



img::after {
     content: "\2639" " " attr(alt);

     font-size: 18px;
     color: rgb(100, 100, 100);

     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}

最终输出：此外，为了在伪元素中使用 HTML 符号，您必须首先获取符号编号，然后将其转换为十六进制值。这里有一个很棒的教程，教您如何实现这一点。

文章来源：https://dev.to/sasscrafter/how-to-style-broken-images-with-css-4il2