天道酬勤,学无止境

How to remove borders from loading gif on a dark background?

I'm trying to create a dialog with a loading gif without any borders or background for my web application. I'm using PrimeFaces for JSF. I can't delete the shadow on the border. Here image and code:

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>

评论

The problem is with the GIF format. It doesn't support alpha channel transparency, so the edges of transparent images can look very bad (depending on the background it's displayed on).

Instead of a GIF animation you could use a SVG animation or use an animated icon, for example using PrimeIcons:

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

See also:

  • How to get better transparency with GIFs?
  • https://www.google.com/search?q=svg+loader+animation

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在 IE6 中链接 CSS 类 - 试图找到一个 jQuery 解决方案?(Chaining CSS classes in IE6 - Trying to find a jQuery solution?)
    问题 tl;dr = "有人知道如何使用 jQuery 或类似工具为 IE6 应用链式类吗?" 对, 也许我问不可能? 我认为自己对 Javscript 和 jQuery 相当陌生,但话虽如此,我最近编写了一些相当复杂的代码,所以我肯定会到达那里......但是我现在在我目前的自由职业合同中遇到了一个相当有趣的问题。 以前的 Web 编码器对 HTML 采取了 Grid-960 方法,因此使用链式类来设置许多元素的样式。 下面的示例是代码中的典型示例: <div class='blocks four-col-1 orange highlight'>Some content</div> 并且在 css 中会有不同的声明:(不是实际的 css ......但足够接近) .blocks {margin-right:10px;} .orange {background-image:url(someimage.jpg);} .highlight {font-weight:bold;} .four-col-1 {width:300px;} 更糟糕的是......这是在CSS中: .blocks.orange.highlight {background-colour:#dd00ff;} 任何不熟悉这个特定错误的人都可以在这里阅读更多相关信息:http://www.ryanbrill.com
  • 如何显示页面加载div,直到页面加载完成?(How to show Page Loading div until the page has finished loading?)
    问题 我的网站上有一个版块,在进行一些密集的通话时加载速度很慢。 知道如何让div在页面准备时显示类似于“加载”的内容,然后在一切准备就绪时消失吗? 回答1 我需要这个,经过一番研究,我想到了这个(需要jQuery): 首先,在<body>标记之后添加以下代码: <div id="loading"> <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> </div> 然后将div和image的样式类添加到CSS: #loading { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.7; background-color: #fff; z-index: 99; text-align: center; } #loading-image { position: absolute; top: 100px; left: 240px; z-index: 100; } 然后,将此JavaScript添加到您的页面中(当然,最好在页面末尾</body>标记之前): <script> $(window).load(function() { $('#loading').hide()
  • 如何使用jQuery创建“请稍候,正在加载...”动画?(How can I create a “Please Wait, Loading…” animation using jQuery?)
    问题 我想在我的网站上放置一个“请稍等,加载中”的旋转圆圈动画。 我应该如何使用jQuery完成此操作? 回答1 您可以通过各种不同的方式来执行此操作。 在页面上显示“正在加载...”的小状态可能是微妙的,或者在加载新数据时整个页面变灰会使整个页面变灰。 我在下面采用的方法将向您展示如何完成这两种方法。 设置 让我们从我将要使用的http://ajaxload.info获得一个不错的“加载”动画开始 让我们创建一个我们可以在发出ajax请求时随时显示/隐藏的元素: <div class="modal"><!-- Place at bottom of page --></div> CSS 接下来,让我们对其进行一些说明: /* Start by setting display:none to make this hidden. Then we position it in relation to the viewport window with position:fixed. Width, height, top and left speak for themselves. Background we set to 80% white with our animation centered, and no-repeating */ .modal { display: none
  • jQuery周期IE7透明png问题(jquery cycle IE7 transparent png problem)
    问题 当我在IE7中有透明的png文件时,我无法使jquery循环正常工作 在Firefox和Chrome中都可以,但是在IE(第7版)中,我会得到黑色,淡入淡出时png透明。 可以使它正常工作吗? 回答1 不幸的是,尽管IE7支持透明PNG,但一次只能将一个过滤器应用于一个元素。 在您的应用程序中发生的事情是IE7将Alpha滤镜应用于您的PNG,然后jQuery要求为淡入淡出应用另一个Alpha滤镜。 像您说的那样,结果可见。 解决此问题的方法是将png嵌套在容器内,然后使容器褪色。 有点像这样: <div id="fadeMe"> <img src="transparent.png" alt="" /> </div> 解决这个问题的另一种方法是我使用了这个简单的jQuery插件,因为我无法更改结构。 我会注明出处,但老实说,我不记得我在哪里找到它。 /* IE PNG fix multiple filters */ (function ($) { if (!$) return; $.fn.extend({ fixPNG: function(sizingMethod, forceBG) { if (!($.browser.msie)) return this; var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes
  • 如何在 GtkTreeView 中交替亮/暗行?(How to alternate light/dark rows in GtkTreeView?)
    问题 我已经阅读并尝试了这个问题的现有解决方案,但我无法让它们工作。 我希望有人能指出我做错了什么,或者告诉我为什么这些解决方案不再有效。 https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/(5 岁) 使用 gtk 列出文件的小部件(2 岁) 如何在 pygtk 中更改 gtk.TreeView 的交替背景行颜色? (4岁) https://askubuntu.com/questions/285559/how-to-reenable-alternating-grey-lines-in-nautilus-files-3-6-list-view(3岁) 我想确保这些解决方案不起作用,所以我制作了一个这样的样式表: GtkTreeView row { color: #FFFFFF; background-color: #FF0000; } GtkTreeView row:nth-child(even) { background-color: #FF00FF; } GtkTreeView row:nth-child(odd) { background-color: #00FFFF; } 用花哨的颜色,只是为了让行色的差异非常明显。 然后,我做了一个小应用程序来加载树视图: #include <gtk
  • 使用 jquery 加载 GalleryView 脚本会导致问题(loading GalleryView script using jquery causes problem)
    问题 我正在使用 GalleryView 并且在像这样在头部加载脚本时 <script type="text/javascript" src="/js/galleryview/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/galleryview/jquery.galleryview-2.1.js"></script> <script type="text/javascript" src="/js/galleryview/jquery.timers-1.2.js"></script> 一切正常,但是当我使用 jquery 加载这样的 $(document).ready(function(){ $('#gallery').hide(); $('<link />').appendTo('head').attr({ type: 'text/css', rel: 'stylesheet', href: '/js/galleryview/galleryview.css' }); $.getScript('/js/galleryview/jquery.easing.1.3.js', function() { $.getScript('/js/galleryview/jquery
  • 如何删除背景图片周围的灰色边框?(How do I remove the gray border that surrounds background images?)
    问题 我在以下代码行中遇到了一个有趣的问题: <img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/> 在Safari中(至少),灰色边框环绕300x50px区域。 添加style =“ border:none;” 不会将其删除。 有任何想法吗? 谢谢。 麦克风 回答1 因此,您有一个没有src属性的img元素,但确实应用了背景图像样式。 我想说的是,如果您指定了src属性,则灰色边框是图像所在位置的“占位符”。 如果您不希望使用“前景”图像,则不要使用img标签-您已经声明更改为div可以解决问题,为什么不采用该解决方案呢? 回答2 您还可以添加空白图像作为占位符: img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==' 这应该可以解决问题! 回答3 实际上,这似乎至少在Chrome上有效: img { content: ""; } 回答4 下面将使用css将src设置为一个小的透明图像,该图像解决了src属性问题,同时保持了对图像的控制: content:url('data:image/gif
  • 在执行$ .ajax时显示加载图像(Show loading image while $.ajax is performed)
    问题 我只是想知道如何显示指示异步请求正在运行的图像。 我使用以下代码执行异步请求: $.ajax({ url: uri, cache: false, success: function(html){ $('.info').append(html); } }); 有任何想法吗? 回答1 当然,您可以在提出请求之前显示它,而在完成请求后隐藏它: $('#loading-image').show(); $.ajax({ url: uri, cache: false, success: function(html){ $('.info').append(html); }, complete: function(){ $('#loading-image').hide(); } }); 我通常更喜欢将其绑定到全局ajaxStart和ajaxStop事件的更通用的解决方案,这样它就可以显示在所有ajax事件中: $('#loading-image').bind('ajaxStart', function(){ $(this).show(); }).bind('ajaxStop', function(){ $(this).hide(); }); 回答2 使用ajax对象的beforeSend和complete函数。 最好从beforeSend内部显示gif,以便将所有行为封装在一个对象中。
  • 如何在CSS中删除图像周围的边框?(How remove border around image in css?)
    问题 当鼠标的光标位于帮助图标上时,我尝试显示跨度。 它可以工作,但是尽管如此,我还是无法删除图标周围的边框。 我的CSS: .info{ position:absolute; border:none; } a.info{ position:absolute; z-index:24; background:none; color:#000; text-decoration:none } a.info:hover{ z-index:25; background-color:#FFF; cursor:help; } a.info span{ display: none } a.info:hover span{ display:block; position:absolute; cursor:help; bottom:0px; left:26px; width:150px; padding:4px; } 光盘 回答1 尝试这个: img{border:0;} 您还可以通过以下方式限制范围并仅删除某些图像上的边框: .myClass img{border:0;} 可以在此处找到有关border css属性的更多信息。 编辑:将边框从0px更改为0 。 如注释中所述, px对于0的单位是多余的。 回答2 另一件事-记住,如果你有一个空的有一个src属性,那么这些建议都将工作
  • How can I export CSS animation as animated PNG, gif, or WEBP *with transparency*?
    Press "Run code snippet" below to see the animated loading spinner that I want to save. I want to replace all green colors with transparency. Also, I'd like the animation to loop perfectly. I tried recording a screen capture video using OBS and then uploading to https://ezgif.com/video-to-gif and using the "Replace color with transparency" feature, but it didn't remove any green color at all. Also, if exporting canvas animations is easier than capturing CSS animations, I'd accept an answer that shows me how. body { display: flex; overflow: hidden; height: 100vf; padding: 0; margin: 0
  • 暗模式切换(Dark mode switch)
    问题 我正在尝试制作一个可以在选中复选框时切换到“暗模式”的网站。 我已经将复选框的样式设计为看起来像一个开关。 我让它使用一些 javascript 来加载备用样式表“onChange”。 这工作正常,问题是,当您取消选中该框时,我希望它再次加载原始样式表。 任何帮助将不胜感激。 我是 javascript 新手,想了解更多。 以下是我的 HTML、CSS 和 Javascript 代码: <input type="checkbox" id="switch1" name="switch1" class="switch" onchange="switch_style('alt');"/> <label for="switch1">Dark Mode</label> /* This is for the dark mode switch */ input.switch:empty { margin-left: -999px; } input.switch:empty ~ label { position: relative; float: left; line-height: 1.6em; text-indent: 4em; margin: 0.2em 0; cursor: pointer; -webkit-user-select: none; -moz-user-select
  • Dark mode switch
    I am trying to make a website that can be turned to 'dark mode' when a checkbox is selected. I have styled the checkbox to look like a switch. I have it working with some javascript to load an alternate stylesheet 'onChange'. This works fine, the problem is, when you uncheck the box, I would like it to load the original stylesheet again. Any help would be greatly appreciated. I am new to javascript and would like to learn more. The following is my HTML, CSS & Javascript code: <input type="checkbox" id="switch1" name="switch1" class="switch" onchange="switch_style('alt');"/> <label for="switch1
  • OpenCV删除背景(OpenCV remove background)
    问题 我正在尝试删除一些图像的背景,调整一些值,并使用诸如morphologyEx方法给我一个令人满意的结果,但是仍然存在一些孔,在最后一种情况下,这些孔甚至在每个轮廓上进行迭代并绘制时都不会填满与-1 。 我可以看到阈值图像确实非常好,可以使线条整体具有形状,但是我不知道如何继续... 更新我已经更改了代码,因此可以获得更好的结果,但是仍然有一些漏洞...如果可以填补这些漏洞,该脚本将是完美的。 def get_contrasted(image, type="dark", level=3): maxIntensity = 255.0 # depends on dtype of image data phi = 1 theta = 1 if type == "light": newImage0 = (maxIntensity/phi)*(image/(maxIntensity/theta))**0.5 newImage0 = array(newImage0,dtype=uint8) return newImage0 elif type == "dark": newImage1 = (maxIntensity/phi)*(image/(maxIntensity/theta))**level newImage1 = array(newImage1,dtype=uint8) return
  • 我怎样才能改变我的厚度标签(How can I change the thickness of my <hr> tag)
    问题 我想在 CSS 中更改水平线 ( <hr> ) 的粗细。 我知道它可以像这样在 HTML 中完成 - <hr size="10"> 但是我听说 MDN here 上提到了这已被弃用。 在 CSS 中,我尝试使用height:1px但它不会改变厚度。 我希望<hr>线的厚度为0.5px 。 我在 Ubuntu 上使用 Firefox 3.6.11 回答1 为了保持一致性,移除所有边框并使用<hr>厚度的高度。 添加背景颜色将使您的<hr>具有指定的高度和颜色。 在您的样式表中: hr { border: none; height: 1px; /* Set the hr color */ color: #333; /* old IE */ background-color: #333; /* Modern Browsers */ } 或内联,因为你有它: <hr style="height:1px;border:none;color:#333;background-color:#333;" /> 更长的解释在这里 回答2 浏览器中的子像素渲染 亚像素渲染很棘手。 您实际上不能指望显示器渲染小于像素的细线。 但是可以提供子像素尺寸。 根据浏览器的不同,它们以不同的方式呈现这些。 查看 John Resig 关于它的博客文章。 基本上,如果您的显示器是 LCD 并且您正在绘制垂直线
  • 如何删除此表格上的双边框?(How do I remove the double border on this table?)
    问题 我正在处理HTML和CSS,但得到的结果并不完美: 我在这里创建了一个小提琴:http://jsfiddle.net/niklasro/GParb/ 但是表格的边框似乎与所需的屏幕截图的边框不匹配。 如何使布局看起来更像原始模型并删除表格上的双边框? 这是我在表格中使用的CSS和HTML代码: 的CSS table{ width:100%; text:align:center;border:1px solid #00F; font-size:12px;} th{background:#EEE;width:auto; text-align:center; padding:5px 0;border:1px solid #00F;} td{width:auto; text-align:center; padding:5px 0;border:1px solid #00F;} tr:nth-child(even) {background: #EEE;} 的HTML <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td> <a href="/admin/account/0b2bdf4f-c293-418b-a082
  • UL左边有空白[重复](UL has margin on the left [duplicate])
    问题 这个问题已经在这里有了答案: 如何从无序列表项中删除缩进? (9个答案) 5年前关闭。 由于某种原因,我的页脚中有一个空格,所以它与上面的内容(成员文本等)不对齐。如果我要将文本放在此ul之外(但仍在页脚包装内)没有这样的空间。 看起来是这样的: HTML: <!DOCTYPE html> <html> <head> <title>Ozanam Club </title> <link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/normalize.css"/> <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/fonts/enigma.css" /> </head> <body> <div id="wrap"> <header> <div id="logo"><a href="#"><img src="images/logo.png" height="157px" width="237px"></a></div> <!-- <div class="social"> <ul> <li><a
  • 关于转换 API 的不完整的 Google App Engine 文档(Incomplete Google App Engine Documentation on Conversion API)
    问题 我正在尝试将 HTML 字符串转换为 .PNG 文件。 感谢 Nick Johnson,他向我指出了 GAE 转换 API,请参阅上一篇文章。 我使用了 GAE Con​​version API,它可以工作,但我的 HTML 字符串中的图像不显示。 在 GAE Con​​version API 的文档中有对Adding Assets的引用,并提到了static/icon.gif ,我认为这可以解决我的问题,但该文档不完整。 有人可以帮忙吗? 我的 HTML 转换为 .PNG 有效,但所有图像,例如 <img src="http://mydomain.com/image.gif>尚未打印http://mydomain.com/image.gif可用。 谢谢 PB 更新 1:根据文档,我应该为每个图像创建单独的资产,名称必须与 src attr 匹配。 List<Asset>assets = new ArrayList<Asset>(); try { Asset asset = new Asset("text/html", notification.getMessage().getBytes("UTF-8"), "testfile.html"); assets.add(asset); } catch (UnsupportedEncodingException e) { e
  • 在加载图片时显示加载的gif(Show loading gif while image is loading)
    问题 我编写了一些代码,使用户可以从zip上传一些图像。 在下一页上,我需要以85 * 85 px的帧分别显示所有图像。 问题在于,加载所有图像可能需要一些时间。 因此,我想在用户等待图像加载时显示加载的gif。 我将图像的src设置为the loading gifs ,同时创建了一些复选框,其真实源为id echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">"; echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>"; <input type="hidden" name="aantal" id="aantal" value="<?=$image?>" > 然后,我创建了一些JavaScript来检查图像是否已加载,以及何时加载图像,应该替换图像的源。 <script> var aantal = document
  • Incomplete Google App Engine Documentation on Conversion API
    I am trying to convert a HTML string into a .PNG file. Thanks to Nick Johnson who pointed me to GAE Conversion API see previous post Here. I use the GAE Conversion API which works but my images in my HTML string doesn't display. In the Documentation on GAE Conversion API there is a reference to Adding Assets and a mention of static/icon.gif which I think may address my problem but that documentation is incomplete. Can anyone please assist? My HTML conversion to .PNG works but all images e.g <img src="http://mydomain.com/image.gif> doesn't print yet http://mydomain.com/image.gif is available
  • 如何在Visual Studio 11中更改“突出显示当前行”的边框宽度和颜色(How to change border width and color of “highlight current line” in Visual Studio 11)
    问题 我可以通过安装更新​​来更改背景色 工具/选项/环境/文本编辑器/突出显示当前行(有效) 有没有办法改变高光边框的宽度或颜色? 我喜欢高光,所以我不想仅仅禁用它。 但是消除边框,缩小边框或更改颜色会很好。 回答1 自从撰写原始答案以来,似乎这种行为已得到解决。 因此,答案需要更新,这里是: https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/3012415-remove-the-light-border-around-highlight-current You can remove the border by matching the Background color of the Highlight Current Line (Active) setting in Fonts and Colors to the Foreground color. This is a simple customization. 转到“工具”>“选项”>“环境”>“字体和颜色”,然后在其中查找“突出显示当前行”,“有效”和“无效”。 如上文VS团队所述,通过链接和引用删除边框。 回答2 您可以通过以下方法使边界消失 工具>选项...>环境>字体和颜色>显示以下内容的设置:文本编辑器>显示项目