css实现:after中使用图片

2023-11-03

先看一下效果:
在这里插入图片描述
下面是代码实现:

.xin {
  position: relative;
  font-size: 20rpx;
  color: #15bf5d;
  border: 1rpx dashed #ccc;
  padding-top: 20rpx;
}

.xin::after {
  content: '';
  background: url(https://.........com/_system/gAdd.png);
  position: absolute;
  background-size: 20rpx;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20rpx;
  height: 20rpx;
}

坑总结:

在使用background 导入本地的加号图片的时候,微信可以正常从本地引入,但是到了支付宝,就显示错误。不允许在after中使用本地图片,只能使用url链接

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css实现:after中使用图片 的相关文章

随机推荐

  • 说一下反三角函数atan等的角度计算值,弧度制和角度制

    我们平时在进行数学计算是 往往会用到三角函数和反三角函数 最常用的反三角函数大概就是atan了 因为这个相当于给定两点之间直线的夹角了 1 正切函数图像 这时正切函数图像 高中的我们就应该知道 正切函数是周期函数 即同一个值 有很多角度值对
  • html 中shadow DOM 的使用

    什么是shadow DOM An important aspect of web components is encapsulation being able to keep the markup structure style and b
  • antV/g2的使用

    antV g2 特点 以数据驱动 安装 npm instal antv g2 使用 准备一个容器 div div 执行代码 1 引入 import
  • 如何使用C ++以编程方式在Word文档中使用目录?

    目录 TOC 是Word文档的重要组成部分 它提供了文档内容的概述 并允许您快速导航到所需的部分 您可能会遇到需要以编程方式从Word文档中添加 提取 更新或删除目录的情况 为此 本文将教您如何使用C 处理Word文件中的目录 让我们探索以
  • D. Permutation Restoration(优先队列+贪心)

    Problem D Codeforces include
  • 学习Flask之分页插件flask_bootstrap

    这次分页功能 主要是依靠 Flask Bootstrap 首先也是下载flask bootstrap pip install flask bootstrap 安装完后可以观察里面的文件夹 里面其实还有nav 导航 form 表单 pagin
  • linux内核调试环境的搭建(使用qemu)

    这里说明下 本人调试的内核版本是2 6 11 12 为什么去调试这么 古老 的版本 原因不多说了 你手头也许正拿着ULK3 而它针对的内核版本正是2 6 11 有比这更好的理由吗 而且这个版本不算旧 已不算新 我认为还算不错 想想当下还有如
  • 我的计算机管理里面没有家庭组,Win10控制面板没有家庭组怎么解决?

    我们经常在使用电脑的时候经常会用到家庭组这个功能 家庭组使用起来非常方便的功能 但是最近很多的用户们反映Win10家庭组功能在控制面板找不到了 这个问题我们要怎么解决呢 下面小编为大家带来详细的解决教程介绍 快来看看吧 Win10控制面板没
  • 七牛云 composer 文件上传、删除、请除缓存操作

    class QiniuUp extends ModelBasic private AccessKey private SecretKey private bucket private auth function construct pare
  • DBCP连接池参数

    DBCP连接池参数说明如下 1 maxActive 10 表示并发情况下最大可从连接池中获取的连接数 2 maxIdle 5 如果在并发时达到了maxActive 10 那么连接池就必须从数据库中获取10个连接来供应用程序使用 当应用程序关
  • [1187]win环境2026, SSL connection error: unknown error number

    先贴上详细的报错信息 PS D test orchard liang gt python manage py sqlmigrate app 0001 Traceback most recent call last File D Python
  • python复习

    python复习 文章目录 python复习 一 Python基础笔试题 1 什么是变量 2 python和CPython是什么关系 3 如何生成一个整数序列 4 表达式与语句的主要区别是什么 5 Python的基础数据类型有哪些 6 在P
  • [RK3568][Android11]内核Oops日志分析

    文章目录 一 什么是内核oops 二 内核oops信息 三 工具调试内核oops 3 1 gdb list command 3 2 addr2line 3 3 objdump 一 什么是内核oops Linux内核在发生kernel pan
  • 如何在Linux下开发

    ctrl alt t打开命令行 输入vi 文件名 c 一 VI的使用 VI有两种模式 一种是命令行模式 一种是输入模式 命令行模式 这个是默认模式 VI之后就是这个模式 如果我们要从输入模式回到命令行模式 按下esc 待INSERT消失 我
  • 解决ubuntu不能远程连接

    1 查看当前是否安装了ssh server服务 dpkg l grep ssh 2 安装ssh server服务 sudo apt get install openssh server
  • 将你的STM32搞成Arduino(一)

    接触STM32有一年半了从刚开是的懵懂无知到现在的拉个库就是干 我慢慢的发现STM3功能的强大已经配套环境的完整程序 他不像是51单片机那样已经被intel抛弃 之后也没人出一个官方的库 一切都是纯生的需要自己搭建 STM32标准库已经为你
  • Java接口关系树状图

    圆形 接口 矩形 表示对象 向上的蓝色箭头 接口继承关系 乡下的蓝色箭头 依赖关系
  • 正则知识点滴

    s S 与 的区别 s S 支持跨行匹配
  • Ubuntu下使用ls命令显示文件颜色相关内容及修改

    lt 转载自 http pcyoyo com p 465 gt 在Ubuntu下 使用ls命令显示目录下文件及文件夹时会先显示不同颜色 如下图所示 如果知道了不同颜色分别代表的含义 那么对于我们查看目录下文件信息方便了很多 所以就搜索了一下
  • css实现:after中使用图片

    先看一下效果 下面是代码实现 xin position relative font size 20rpx color 15bf5d border 1rpx dashed ccc padding top 20rpx xin after con