Question

当我调整浏览器窗口大小时，我想让旋转木马图像居中聚焦。（有一些效果，如变暗，图像上方的方格板）

这是我的代码

HTML - 由于篇幅原因，我跳过了其他两个转盘主题。

<div id="carouselSection" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
  <li data-target="#carouselSection" data-slide-to="0" class="active"></li>
  <li data-target="#carouselSection" data-slide-to="1"></li>
  <li data-target="#carouselSection" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
  <div class="carouselImage" id="imgWrapper">
    <div id="black">
      <img src="img/carousel_img/slide_001.png">
    </div>
  </div>
  <div class="first_text">
    <p data-langNum="0">blah blah blah</p>
    <img src="img/logo/logo.png">
  </div>
</div>

</div>
</div>

CSS

/* I want to make full screen of carousel image even when resizing window */
.carouselSection {
    height: 100%;
    width: 100%;
}

/* This is for checkered-board effect image*/
#imgWrapper {
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    background-image:
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

/* This is for darkening effect the image */
#black {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

/* This is for showing checkered board and darkening effect */
#imgWrapper img {
    opacity: 0.5;
}

Javascript（jquery）

$('#carouselSection').css('height', $(window).height());
    $('.carouselImage, #black').css('height', $(window).height());

$(window).resize(function(){
    $('#carouselSection').css('height', $(window).height());
    $('.carouselImage, #black').css('height', $(window).height());
});

我将此代码与jquery，jquery-ui，bootstrap cdn一起使用，但我不会在本文中附上这些内容。

这是JSFiddle：https://jsfiddle.net/98k4u940/（但我仍然看不到JSFiddle中的功能结果）

无论如何，该代码不会将图像宽度100％高度100％。（1920 * 1080分辨率）。而且我之所以不使用宽度：100％和高度：自动是：这使得图像变得更加广泛。

我只是想要这种效果。你可以在这个网站上得到我想要的效果：https://www.linefriends.com/

我尝试在CSS中添加一些代码到#black（id：black），效果正常（正在运行）！但我认为其他变暗或格子板效应被覆盖了。

    background-image: url('img/carousel_img_opt/slide_001.png');
    background-size: cover;
    background-position: center center;

此外，我无法使用此代码，因为有三个轮播图像。但是该元素只有一个background-image: url('some url')。

有人知道如何在https://www.linefriends.com/中发挥这种效果吗？我试图使用上面的三行css代码来实现这个效果，但为了做到这一点，我不得不为background-image制作3组不同的代码：url。这就是我成为这个头衔的原因。

感谢阅读！

调整旋转木马图像的一些效果，但不能正常工作

0 个答案: