首页 > 其他分享 >使用base64数据做背景图片,IE无法显示

使用base64数据做背景图片,IE无法显示

时间:2023-10-10 15:12:21浏览次数:33  
标签:200 200% 22% base64 3D% background IE image 背景图片

 

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20t%3D%221636092321349%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%223324%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M256%20877.714286l512%200%200-146.285714-512%200%200%20146.285714zm0-365.714286l512%200%200-219.428571-91.428571%200q-22.857143%200-38.857143-16t-16-38.857143l0-91.428571-365.714286%200%200%20365.714286zm658.285714%2036.571429q0-14.857143-10.857143-25.714286t-25.714286-10.857143-25.714286%2010.857143-10.857143%2025.714286%2010.857143%2025.714286%2025.714286%2010.857143%2025.714286-10.857143%2010.857143-25.714286zm73.142857%200l0%20237.714286q0%207.428571-5.428571%2012.857143t-12.857143%205.428571l-128%200%200%2091.428571q0%2022.857143-16%2038.857143t-38.857143%2016l-548.571429%200q-22.857143%200-38.857143-16t-16-38.857143l0-91.428571-128%200q-7.428571%200-12.857143-5.428571t-5.428571-12.857143l0-237.714286q0-45.142857%2032.285714-77.428571t77.428571-32.285714l36.571429%200%200-310.857143q0-22.857143%2016-38.857143t38.857143-16l384%200q22.857143%200%2050.285714%2011.428571t43.428571%2027.428571l86.857143%2086.857143q16%2016%2027.428571%2043.428571t11.428571%2050.285714l0%20146.285714%2036.571429%200q45.142857%200%2077.428571%2032.285714t32.285714%2077.428571z%22%20p-id%3D%223325%22%20fill%3D%22%23ffffff%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

在当前版本的Chrome,Safari(OS X和iOS)和Firefox中,这可以很好地工作。

解决:将数据类型从 data:image/svg+xml;utf8 更改为 data:image/svg+xml;charset=utf8(即charset=必填)

如:background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221636092...

 

标签:200,200%,22%,base64,3D%,background,IE,image,背景图片
From: https://www.cnblogs.com/tingying/p/17754724.html

相关文章

  • js-cookie库
    https://blog.csdn.net/weixin_49046027/article/details/121123014https://www.cnblogs.com/gopark/p/13743364.html简介js-cookie是一个简单的,轻量级的处理cookies的jsAPI,主要用来处理cookie相关的插件使用1.下载npmi-Djs-cookie2.引入importCookiesfrom'j......
  • 数通HCIE_TCP
    TCP:传输控制协议0.TCP概述· TCP是一种面向连接的、可靠的传输层通信协议,由IETF的RFC793定义。 1.TCP报文格式 2.TCP的建立:三次握手 3.TCP的关闭:四次挥手 ......
  • MongoDB Node.js Driver and MongoClient All In One
    MongoDBNode.jsDriverandMongoClientAllInOneThenextgenerationNode.jsdriverforMongoDB$npmimongodb#OR$npmi-Smongodb#OR$npminstallmongodb--savehttps://mongodb.github.io/node-mongodb-native/index.htmlhttps://www.mongodb.com......
  • ListView
    ListView基本用法1.创建一个Item类,里面存储的是一条Item的信息publicFruit{ privateStringname; privateintid; ...}2.创建一个Item的Adapter继承ArrayAdapter<>并且重载其构造函数和getView方法publicFruitAdapter(@NonNullContextcontext,intresource,@N......
  • 数通HCIE_PPPoE
    PPPoE:以太网承载点对点协议0.PPPoE协议概述·PPPoE(PPPoverEthernet,以太网承载点对点协议)是一种把PPP帧封装到以太网帧中的链路层协议。· PPPoE可以使以太网网络中的多台主机连接到远端的宽带接入服务器。·  PPPoE集中了PPP和Ethernet两个技术的优点。既有以太网的组......
  • DataGridView绑定DataTable的建议方式
    DataGridView绑定DataTable的建议方式1.将DataTable绑定到BindingSource2.将BindingSource绑定到DataGridView3.DataGridView修改完要从Datatable取值时,同步过去时,BindingSource和DataGridView两个都要执行EndEdit()publicpartialclassForm1:Form{D......
  • gatk UnifiedGenotyper
    使用UnifiedGenotyper注意如下:(1)输入:.recalibration.bam(2)输入:.recalibration.bai(3)dbSNP:vcfdbsnp,有头部;有与DNA一样的染色体顺序;有idx文件;UnifiedGenotyperUnabletoreadindexfile,forinputsource:vcf.idxSorryforthedelayedresponse.Itturnsoutthatthisisa......
  • Top 10 OSAT Companies in World
    Top10OSATCompaniesinWorldGlobal OSAT (OutsourcedSemiconductorAssemblyandTest)marketislargelydominatedbyASETechnologyHoldingCo.Ltd.,AmkorTechnology,JCET(STATSChipPAC),SPIL,PowertechTechnologyInc, andothers. Basedontheover......
  • Qto_SpaceBaseQuantities
    Qto_SpaceBaseQuantities空间基准量:定义所有引用的空间时通用的基准量。  NameTypeDescriptionHeightQ_LENGTHHöheGesamteHöhedesRaums,vonRohbodenzurRohdecke,wirdnurangegebenwennderRaumeinekonstanteHöhehat.HeightTotalheight......
  • [903] Concatenate (merge) multiple dictionaries in Python
    Toconcatenate(merge)multipledictionariesinPython,youcanusevariousmethodsdependingonyourPythonversionandpreferences.Herearesomecommonapproaches:1.Usingtheupdate()Method:Youcanusetheupdate()methodofdictionariestomergeo......