当前位置:首页 > 技术 > 正文内容

css:利用伪类处理图片加载失败的样式问题

Lotus2022-10-06 19:05技术

实现效果 在这里插入图片描述

实现代码

index.html

    <h2>未做错误处理</h2>
     <div style="font-size: 0">
      <img src="./img/image.jpg" alt="" />

      <img src="./img/image-1.jpg" alt="" />
    </div>

    <h2>有错误处理</h2>
    <div style="margin-top: 20px; font-size: 0; display: flex">
      <img class="mo-image" src="./img/image.jpg" alt="标题" />
      <img class="mo-image" src="./img/image-1.jpg" alt="标题" />
    </div>

style.css

img {
  width: 300px;
  height: 150px;
  object-fit: cover;
  display: inline-block;
}

.mo-image {
  display: inline-block;
  /* transform: scale(1); */
  position: relative;
}

/* 显示占位图片 */
.mo-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5 url(../img/image-error.jpg) no-repeat center / 50% 50%;
  color: transparent;
}

/* 显示alt中的文字 */
.mo-image::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在线示例:https://mouday.github.io/front-end-demo/image-error/index.html

参考 视频:图片加载出错样式最佳实践

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/136.html

分享给朋友:

“css:利用伪类处理图片加载失败的样式问题” 的相关文章

你看好云原生吗?

我理解的云原生是一种思想。目前为止,再稍具体一点就是一种构建和运行应用程序的方法 ,是一套技术体系和方法论。 目前来看,互联网技术领域没有那么粗放了,可以看成从”一堆砖头“变成了码的整齐的砖头,各种人物资源、空间利用率更高了。 云原生还在不断的发展,一年前我看中了云原生的发展方向并展开了一系列的学习,目前工作中也只是稍有涉及,并不是主要工作,我还是非常期望可以从事云原生工作的,下面罗列一下云原...

用 VS Code 搞Qt6:使用 PySide 6

一般来说,用C++写 Qt 应用才是正宗的,不过,为了让小学生也能体验 Qt 的开发过程,或者官方为了增加开发者人数,推出了可用 Python 来编程的 Qt 版本。此版本命名比较奇葩,叫 PySide,与 Qt 6 配套的是 PySide 6。当前最新版本是 6.3.2。 PySide 的优势在于它是官方维护的,完全是C++开发的。在原有库基础上增加了对应的 .pyd 文件,对 API 做了封装...

【C语言练习_2】用C语言实现凯撒密码加密解密

1.凯撒密码简介 又叫循环移位密码.它的加密方法是将明文中的每个字母用此字符在字母表中后面第k个字母替代.它的加密过程可以表示为下面的函数:E(m)=m+k(mod n) 其中:m为明文字母在字母表中的位置数;n为字母表中的字母个数;k为密钥;E(m)为密文字母在字母表中对应的位置数. 2.代码 #include <stdio.h>#include <string.h>...

设计模式之访问者模式

大多数情况下你不需要访问者模式,但当一旦需要访问者模式时,那就是真的需要它了,这是设计模式创始人的原话。可以看出应用场景比较少,但需要它的时候是不可或缺的,这篇文章就开始学习最后一个设计模式——访问者模式。 一、概念理解 访问者模式概念:封装作用于某对象结构中的各元素的操作,它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 通俗的解释就是,系统中有一些固定结构的对象(元素),在其...

Golang依赖包的各项指标分析总结

专注于PHP、MySQL、Linux和前端开发,感兴趣的感谢点个关注哟!!!​​文章已收录​​,主要包含的技术有PHP、Redis、MySQL、JavaScript、HTML&CSS、Linux、Java、Golang、Linux和工具资源等相关理论知识、面试题和实战内容。 文章导读 在日常开发中,我们在自己的代码库中难免都会引入外部的包,或者公司内部的私有包。在引入这些包时,我们一般都...

Python基础(九) | time random collections itertools标准库详解

⭐本专栏旨在对Python的基础语法进行详解,精炼地总结语法中的重点,详解难点,面向零基础及入门的学习者,通过专栏的学习可以熟练掌握python编程,同时为后续的数据分析,机器学习及深度学习的代码能力打下坚实的基础。 ????本文已收录于Python基础系列专栏: Python基础系列教程 欢迎订阅,持续更新。 Python自身提供了比较丰富的生态,拿来即用,可极大的提高开发效率 9...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。