clojurescript - 无法在试剂中添加背景图像
问题描述
我有一个 div 如下:
[:div (tw [:flex :flex-col :items-center]
{:style {:background-color "#ffffff"
:background-image "url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%232f855a' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E)"}})
[:div (tw [:text-5xl :font-bold "mt-20"])
]
[:div (tw [:flex :flex-row :items-center])
[:div (tw ["w-2/3"])
[:img (tw [ :h-auto] {:src "img/mock.png"})]
]
]
我在容器 div 的样式图中有一个 background-image 键。url 是从https://www.heropatterns.com生成的。但是背景没有显示。为什么会这样?
我可以更改背景颜色。
解决方案
该:background-image
属性应如下所示
:background-image "url(\"data:image/svg... \")"
推荐阅读
- node.js - 带有 Express 泄漏内存的 Node JS
- javascript - 以下代码行的输出是什么?变量 x = 空;var z = "sp"; 如果 (x==true){ z+=1; } 控制台.log(z); *
- swift - 每当更新变量时如何重新触发函数
- django - 在多个数据库django中实现行级权限
- javascript - 由于 eventListeners 导致网站崩溃;TypeError:无法读取 null 的属性“setAttribute”
- excel - 仅在活动选项卡上设置更新日期
- php - PHP Basic SQL INSERT INTO 致命错误 1048
- html - 当我点击另一个页面时,导航栏会改变大小
- html - `readonly` `input` 是否被视为交互式内容?
- java - 将 Task Runner 中返回的值存储为字段以供以后访问