时间戳

首页 > 解决方案 > 如何从在深色背景上加载 gif 中删除边框？

jsf - 如何从在深色背景上加载 gif 中删除边框？

问题描述

我正在尝试为我的 Web 应用程序创建一个没有任何边框或背景的加载 gif 对话框。我正在为 JSF 使用 PrimeFaces。我无法删除边框上的阴影。这里的图像和代码：

在此处输入图像描述

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui">
    <style>
        .loadingPanel .ui-widget-content{
            background: transparent !important;
            border:none !important; 
            box-shadow:none !important; 
        }
    </style>

    <p:dialog widgetVar="loadingDialog" draggable="false" modal="true" closable="false" resizable="false" showHeader="false" styleClass="loadingPanel">
        <p:graphicImage name="images/loading_spinner.gif" library="ecuador-layout" />
    </p:dialog>

</html>

标签： jsfprimefacesgifgraphicimage

解决方案

问题在于 GIF 格式。它不支持 Alpha 通道透明度，因此透明图像的边缘看起来很糟糕（取决于它显示的背景）。

您可以使用 SVG 动画或动画图标代替 GIF 动画，例如使用PrimeIcons：

<i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>

也可以看看：

推荐阅读