Question

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

enter image description here

<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>

Answer 1

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

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

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

另请参阅：

如何从在深色背景上加载gif移除边框？

1 个答案: