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中使用图片 的相关文章

  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • jQuery animate() 和 CSS calc()

    我尝试设置CSScalc 使用 jQuery 动画 例如 element animate height calc 100 30px 500 我注意到calc 不支持 jQuery 动画 我希望有一种方法可以做到这一点 我不想要类似的方法 替
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用

随机推荐

  • 说一下反三角函数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