文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在滑块后面添加背景图像？

问如何在滑块后面添加背景图像？
EN

Stack Overflow用户

提问于 2022-02-23 11:10:58

回答 1查看 335关注 0票数 0

我做了一个滑块，点击后会改变背景。在打开页面的开头，背景是白色的。如何在页面开头添加背景图像？

我希望第一页有一个背景图像。如果单击其中一个功能，背景图像将发生变化：

单击图标后，应该被替换的图像不会被替换，因为我希望在第一次打开此页面时有一个背景图像，单击该图标后，背景图像将被替换。

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 625px;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}

.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}

.hidden {
  display: none;
}

.sg-feature img {
  width: 100px;
  height: 100px;
}

/* html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
 
}
body{
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 625px;
}
* {
  box-sizing: border-box;
}

.slider {
    width: 90%; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}


.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}


.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}
.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}

  .hidden{
    display : none;
    }

    .hidden1{
      display : none;
      }
      .hidden2{
        display : none;
        }
        .hidden3{
          display : none;
          }
          .hidden4{
            display : none;
            }
            .hidden5{
              display : none;
              }
              .hidden6{
                display : none;
                }

               */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
<title>Title</title>
</head>
<body>
  <div>
  <img src="image/b1.jpg" style="z-index: -1;">
  <section class="background center slider variable-width variable-height ">
    <div class="text-center sg-feature" data-bg="image/b1.jpg">
      <img class="rounded mx-auto d-block" src="image/eat.png" />
      <h3>Eat and Come</h3>
      <br />
      <div class="sg-feature-desc hidden">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b2.jpg">
      <img class="rounded mx-auto d-block" src="image/grab.png" />
      <h3>Grab</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b3.jpg">
      <img class="rounded mx-auto d-block" src="image/experience.png" />
      <h3>Experience</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b4.jpg">
      <img class="rounded mx-auto d-block" src="image/Secret sale.png" />
      <h3>Secret Sale</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b5.jpg">
      <img class="rounded mx-auto d-block" src="image/sale.png" />
      <h3>Hashtag Sale</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b6.jpg">
      <img class="rounded mx-auto d-block" src="image/loyalty.png" />
      <h3>Loyalty</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b7.jpg">
      <img class="rounded mx-auto d-block" src="image/auction.png" />
      <h3>Auction</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </section>

       

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 6,
  speed: 300,
  focusOnSelect: true,
  variableWidth: true,
  variableHeight: true,
  adaptiveHeight: true,
  arrows: false,
  responsive: [{
    breakpoint: 768,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 3
    }
  }, {
    breakpoint: 480,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 1
    }
  }]
});

let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function() {
  $slidesDescriptions.addClass('hidden');
  
  let $slide = $(this);
  $slide.find('.sg-feature-desc').removeClass('hidden');  
  $('body').css('background-image', `url('${$slide.data('bg')}')`);
});
</script>
        
</body>
</html>

javascript

html

jquery

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2022-02-23 15:26:20

background-repeat: no-repeat;可能是这里的问题，因为所选图像的大小可能太小，因此可替换的背景图像正在隐藏它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71235831

复制

相似问题

问如何在滑块后面添加背景图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在滑块后面添加背景图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在滑块后面添加背景图像？
EN