Question

所以我有一个页面，我将一些页面作为iframes加载到旋转木马中（使用slick.js）。我已经将亮度（70％）css过滤器应用到包含不是当前活动项目的iframe的div，并且一旦用户点击它，它的亮度将变为100％，之前选择的变为70 ％..等等。

现在这个工作很好，直到几个星期左右，当我注意到过滤器闪烁了？但这实际上是由于过滤器仅应用于图像和文本，而不是实际的iframe体，在应用过滤器后变为透明。

这是经过编辑的光滑css块（siteloader是包含iframe的div）

.slick-slide .siteloader{
 margin-top:60px;
 width: 180px;
 height: 338px;
 filter: brightness(70%);
 transition: all 300ms ease;
}
.slick-center .siteloader{
 margin-top:20px;
 margin-bottom: 20px;
 width: 240px;
 height: 450px;
 filter: brightness(100%);
 transition: all 300ms ease;
 border-color: #a4a4a4;
 box-shadow: 0px 0px 30px 0.5px rgba(0, 0, 0, 0.2);
}

添加了更新的html和razor代码示例以及更新的图像

这是如何生成轮播的代码。页面是动态加载的

        <div class="template-carousel">
            <h3 style="margin:0">Choose a template</h3>
            <div class="center">
                @{
                    var m = 0;
                    foreach (var item in ViewBag.TemplateList)
                    {
                        var itemClass = m++ > ViewBag.TemplateList.Count ? "slick-current" : "";
                <div class="@itemClass" id="@item.Id" data-tempid="@item.Id">
                    <div class="siteloader">
                        <object data="@item.PageURL" style="height:100%;width:100%"></object>
                    </div>

                    <h4>@item.Name</h4>

                </div>

                    }
                }
            </div>
        </div>

what I get now vs what I used to have

查看我想要的图像与我得到的图像。这可能是Chrome更改或某些CSS规范更改导致的问题吗？

在slick.js轮播中对iframe使用CSS过滤器会对图像应用过滤器，但不会对背景

0 个答案: