首页 > 解决方案 > 无法在试剂中添加背景图像

问题描述

我有一个 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生成的。但是背景没有显示。为什么会这样?

我可以更改背景颜色。

标签: clojurescriptreagent

解决方案


:background-image属性应如下所示

:background-image "url(\"data:image/svg... \")"


推荐阅读