4

我目前在全屏（100% 宽度和高度）上使用带有 scrollHorz 的 Cycle2，背景图像的大小可以“覆盖”，此外页面上没有回调或其他很多内容，因此它是一个非常基本的滑块。

我发现当浏览器太大时，幻灯片过渡出现锯齿状，不流畅。然而，当屏幕较小时，它会更好一些。我也没有遇到任何“褪色”问题，或者至少它根本不明显。

我尝试过各种缓动和速度的组合，但运气不佳。

我不确定它是 css 的东西还是 cycle2 的东西，而且我无法通过谷歌找到类似的问题，有人可以解释一下吗？

HTML

<ul id="homepage-carousel" class="hero">
    <li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
</ul>

CSS

#homepage-carousel {
    width: 100%;
    height: 100%;

    .homepage-carousel-item {
        height: 100%;
        background-repeat: none;
        background-position: top center;
        background-size: cover;
    }
}
4

1 回答 1

0

这不是周期问题

background-size: cover只是有可怕的表现。

您也可以通过添加transform: translate3d(0,0,0)幻灯片来缓解疼痛，但它仍然会不稳定。

用实际图像替换背景通常会提高我的性能，就像这个小提琴一样。但是，图像越大，在任何浏览器中的性能都会越慢；渲染大型运动图像对他们来说很难。

然后它只是大小和定位图像的问题，因为你可以使用类似的东西：

.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}

如果您需要支持旧版浏览器，那么您可以像这样通过图像运行例程来调整大小和偏移量。

还有其他解决方案仅适用于某些浏览器（如object-fit: cover），但这些选项应该适用于所有浏览器。

于 2015-02-21T13:00:38.483 回答