Question

我希望用3张图片覆盖整个页面，但我似乎无法弄清楚如何让它们覆盖在屏幕底部，同时仍能保持响应。

这就是我希望它看起来的样子：https://imgur.com/a/HN18b（虽然仍然有响应）

#include <iostream>
#include <functional>
#include <chrono>
#include <future>
#include <cstdio>

using namespace std;

class callBackTimer //no idea how this works, got it from Stack Overflow thread
{

public:
    callBackTimer()
    :_execute(false)
    {}

    void start(int interval, std::function<void(void)> func)
    {
        _execute = true;
        std::thread([=]()
                    {
                        while (_execute)
                        {
                            func();
                            std::this_thread::sleep_for(
                            std::chrono::milliseconds(interval));
                        }
                    }).detach();
    }

    void stop()
    {
        _execute = false;
    }

private:
    bool _execute;

};

void timerExec()
{
    cout << "SNAFU" << endl;
}

int main(int argc, const char * argv[])
{
    callBackTimer timer; //declare the timer
    std::function<void(void)> exec = timerExec; //declare a pointer to timerExec
    timer.start(25, std::bind(exec)); //start the timer

    return 0;
}

小提琴：https://jsfiddle.net/zkcjg51f/

Answer 1

如果您想要全高，响应式图像，请将图像用作背景图像，然后根据需要调整容器大小。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  height: 100%;
}

.img-div {
  position: relative;
  float: left;
  width: calc(100%/3);
  height: 100%;
  background-size: cover;
  background-position: center;
}

.img-frodo {
  background-image: url('https://i.imgur.com/9bYOn81.jpg');
}

.img-hp {
  background-image: url('https://i.imgur.com/pwG5Bch.png');
}

.img-avatar {
  background-image: url('https://i.imgur.com/KZ96Xsx.png');
}

<div class="container">
    <div class="img-div img-frodo"></div>
    <div class="img-div img-hp"></div>
    <div class="img-div img-avatar"></div>
</div>

如何用3张图片覆盖整个页面？

1 个答案: