Question

我找到了一个使用js更改html元素背景图片的解决方案，但我想只使用css转换。我不想仅仅编辑我的html。

$(document).ready(function() {
    var timeToDisplay = 2000;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;
    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };
    
    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeOut('slow', run);
            }, timeToDisplay);
        });
    }
        
    run();
});

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow"></div>

解决方案jsfiddle

Answer 1

查看CSS animation属性。

这个片段会给你一个想法......

#slideshow {
  border: 1px solid gray;
  height: 330px;
  width: 592px;
  -webkit-animation-name: background;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes background {
  0% {
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.07.png');
  }
  33% {
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.06.png');
  }
  100% {
    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.12.png');
  }
}

<div id="slideshow"></div>

Answer 2

如果可以在元素中添加多个 div，则可以为每个 div 分配不同的背景图像，使用 css grid 和 z-index 将 div 堆叠在另一个顶部，然后使用所需的过渡。

在悬停时使用 CSS 设置多个背景动画的按钮示例： https://codepen.io/haleonearth/pen/LYWaBZa

HTML

<div class="container mt-5 pt-5">
  <div class="row">
    <div class="col-12 d-flex justify-content-center">
            <a href="#" class="flumble-link">
                <div class="btn-label">Learn More</div>
                <div class="flumble-bg"></div>
                <div class="flumble1"></div>
                <div class="flumble2"></div>
                <div class="flumble3"></div>
            </a>
    </div> <!-- /.col -->
  </div> <!-- /.row -->
</div> <!-- /.container -->

CSS

body {
    background-color: #292a2b;
}

.flumble-link {
    display: grid;
    grid-template-columns:
        [start c1-start] 1fr
        [c1-end end];

    grid-template-rows:
        [start r1-start] 3fr
        [r1-end end];
    justify-items: center;
    align-items: center;
}

a {
    background-color: #fff;
    width: 300px;
    height: 60px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0);
}

.flumble-link .btn-label {
    color: #00418b;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    z-index: 500;
}

.flumble-bg {
    width: 100%;
    height: 100%;
    grid-column: start / end;
    grid-row: start / end;
    background-image: url("https://assets.codepen.io/313247/flumble-backdrop_1.png");
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: 0;
    transition: all 0.2s ease-out;
    opacity: 0;
}

.flumble1 {
    width: 100%;
    height: 100%;
    grid-column: start / end;
    grid-row: start / end;
    background-image: url("https://assets.codepen.io/313247/flumbler1_1.png");
    z-index: 400;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left 58px;
    transition: all 0.2s ease-out;
}

.flumble2 {
    width: 100%;
    height: 100%;
    grid-column: start / end;
    grid-row: start / end;
    background-image: url("https://assets.codepen.io/313247/flumbler2_1.png");
    z-index: 300;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: left 58px;
    transition: all 0.3s ease-out;
}

.flumble3 {
    width: 100%;
    height: 100%;
    grid-column: start / end;
    grid-row: start / end;
    background-image: url("https://assets.codepen.io/313247/flumbler3_1.png");
    z-index: 200;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: left 58px;
    transition: all 0.4s ease-out;
}

.flumble-link .btn-label {
    grid-column: start / end;
    grid-row: start / end;
}

.flumble-link:hover {
    text-decoration: none;
}

.flumble-link:hover .btn-label {
    text-decoration: none;
    color: #fff;
}

.flumble-link:hover .flumble-bg {
    opacity: 1;
}

.flumble-link:hover .flumble1,
.flumble-link:hover .flumble2,
.flumble-link:hover .flumble3 {
    background-position: left bottom;
}

如何仅使用CSS转换元素的多个背景图像

2 个答案: