Question

我正在使用光滑的旋转木马。我希望background-url的高度为100％

这是我的旋转木马 http://jsfiddle.net/84c8gvkt/3/

HTML：

<section>
<div class="carousel-container">
    <div class="fill" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');">&nbsp;</div>
    <div class="slide" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');">&nbsp;</div>
</div>

JS：

    $('.carousel-container').slick({
    dots: true,
    infinite: true,
    speed: 3000,
    fade: true,
    cssEase: 'linear',
    autoplay: false,
    pauseOnHover: true,

});

CSS

html, body {
width: 100%;
height: 100%;
}

.fill {
    padding: 0px;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
.fill:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

我无法弄清楚它出了什么问题。

你能帮帮我吗？日Thnx！

Answer 1

问题似乎来自这样一个事实：您的section或您的.carousel-container都没有100％的高度，而且您的光滑轮播也不会产生任何元素。

简单修复只是使用视口单元而不是.fill元素的百分比。

尝试进行以下更改：

.fill {
  height: 100vh;
}

所有浏览器都支持vh单元。 Can I use

这可能不一定是您尝试实现目标的最佳方式，而只是一个建议。

光滑的轮播在服务器上的高度为1px，本地环境为100％

1 个答案: