在一些文字前需要一个logo,可以使用<img />实现,也可以在文字div上使用伪元素实现。
经过搜索,以及逐条实验,可以用下面的代码实现

&::before {width: ;height: ;background: url(...) no-peat;content: ''; /*内容就为空*/display: inline-block;
}

设置这5条后,就能实现伪元素引用图片logo了

CSS伪元素引用图片logo相关推荐

  1. 【伪类与伪元素】用CSS伪元素(以:before为例)插入图片

    [伪类与伪元素]用CSS伪元素(以:before为例)插入图片 对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...

  2. html中伪元素怎么更改图片,如何改变css伪元素的样式

    本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下:selector:pseudo-el ...

  3. css伪元素实现小米商城顶部图标切换

    小米商城顶部header图标效果:点击查看效果 描述:鼠标划上,换成home图标, 思路:使用before和after伪元素设置图片,鼠标hover时改变margin值: html: <div ...

  4. css嵌入样式元素,css伪元素怎么用在内嵌样式?

    css伪元素可以直接在内嵌样式中使用,使用语法为:<style>选择器:pseudo-element{属性名:属性值;}</style>.然后直接通过选择器即可使用伪元素. 伪 ...

  5. CSS伪元素::before,::after

    W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素中. css伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html页面中没有对应的元素,但是其所有用 ...

  6. 用css伪元素制作箭头图标

    用css伪元素制作跳转箭头图标 在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...

  7. 使用伪元素插入图片大小调整问题

    css使用伪元素插入图片大小调整问题 需求描述: 想要利用伪元素在a标签后插入图片,调整为合适大小. 效果图: 问题描述: 使用伪元素例如::after的content属性插入图片不能调整图片大小问题 ...

  8. css中什么是伪元素,CSS伪元素是什么?

    什么?伪元素?之前不是说了伪类吗,怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵,其实伪类和伪元素是两个不同的概念,今天小编就为大家介绍一下伪元素. 一.什么是伪元素 css伪元素代表了某个元素的子 ...

  9. css 伪元素::after与::before的使用

    CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...

最新文章

  1. python流程控制语句-python 流程控制语句
  2. DirectX 开发环境配置
  3. 辅助驾驶等级_自动驾驶分为几级?我们离真正的自动驾驶还有多远?
  4. Scrapy爬虫入门系列2 示例教程
  5. 分享轮子-flutter下拉刷新上拉加载
  6. little bird
  7. html资源文件记载进度条,HTML5矢量实现文件上传进度条
  8. 电脑出现 flash update failed 解决方法
  9. 进阶篇:3.4.1)机械加工件-不同制造工艺详解和对应设备
  10. HTML代码示例和介绍
  11. 热门!实用!游戏rpg制作素材网站推荐!
  12. 微信公众号中视频下载的2种方法
  13. Unity 编辑器开发实战【Scene View】- UI Selector
  14. 老版本MACBOOK更换固态硬盘教程
  15. 912. 排序数组(中等 各种排序 数组)
  16. 盛迈坤电商:店铺自然流量怎么提升
  17. 离线强化学习(Offline RL)系列3: (算法篇) IQL(Implicit Q-learning)算法详解与实现
  18. 操作系统实验五 基于内核栈切换的进程切换(哈工大李治军)
  19. seaweedfs上传文件为什么要先申请文件号?(/dir/assign)(两种工作模式:Volume模式与Filer模式)(seaweed上传文件)
  20. python多线程爬取段子_Python爬虫实战之一秒爬取内涵段子

热门文章

  1. 什么是法人分支机构和非法人分支机构
  2. python+django房屋出租租赁管理系统-含房东三个角色
  3. Java中监视器和锁
  4. LAMP-手动架构部署
  5. pve cpu监测 温度功耗监测软件
  6. he系列高端服务器机柜,HE系列九折型材服务器机柜
  7. 散列表(上):Word 文档中单词拼写检查功能是如何实现的?
  8. 工业互联网蓬勃发展,出奇才能制胜
  9. 【日志系统】Loki日志监控 - 入门初体验
  10. 毫米波雷达AWR1843BOOST辅助停车案例