Question

我实际上有三个问题，但我相信它们都与尝试将两个图像放在同一背景中有关。我只需要它只出现在一个页面上。 1）左边的图像距边缘XXpx，但右边的图像靠边缘。 2）页脚出现在两个图像的底部25％左右之间，而不是位于页面底部。 3）我无法改变图像的大小，因此每个都是相同的。

HTML

<body class="homepage">
</body>
<footer>
  <h5 class id="footer">&copy; BPA Productions 2018</h5>
</footer>
</html>

CSS

.homepage {
   background-image: url(pagepics/emmy.png), url(pagepics/big_oscar.png);
   background-position: left, right;
   background-repeat: no-repeat, no-repeat; 
   padding: 250px;
}

Answer 1

我不知道我是否理解我的意思，但是如果您需要的只是每页的背景图像，那么在JS中使用条件会更容易，可以根据页面添加背景或添加类通过JS，在CSS中为这些类创建调用。

$(document).ready(function(){
 $(".homepage").css({})
});

我们的

$(document).ready(function(){
 $(".homepage").addClass("yourClass")
});

但是我可能也没有理解你的需要，以至于我不能再在代码中写入没有更多信息。

Answer 2

如果我理解正确，看起来你正试图在背景的每一侧放置一个图像，每个图像占据屏幕的一半。我有一个适用于所有现代浏览器的解决方案（测试我的IE，Edge，Chrome和Firefox版本）。

＆＃13;

.homepage {
   background-image: url(https://placeimg.com/480/640/tech), url(https://placeimg.com/480/640/people);
   background-position: left, right;
   background-repeat: no-repeat;
   background-size: 50.1%;
   padding: 250px;
}

＆＃13;

<div class="homepage">
</div>
<footer>
  <h5 class id="footer">&copy; BPA Productions 2018</h5>
</footer>

＆＃13;

如果＆＃39;艾美奖＆＃39;和格莱美＆＃39; .png文件是具有透明度的奖励，background-size属性可以设置为50％。在某些浏览器中，当未设置为50.1％时会出现少量空间，这会产生微小的重叠。希望这有帮助！

Answer 3

如果您的图片尺寸必须相同，则可以在CSS中指定尺寸。

页脚可以是绝对位置，0表示左侧，0表示右侧，0表示底部。

    .homepage {
        background-image: url(pagepics/emmy.png), url(pagepics/big_oscar.png));
        background-position: left, right;
        background-repeat: no-repeat, no-repeat;
        background-size: 400px, 400px;
        /*
        Or like so:
        background-size: 400px 100px, 400px 100px;
        */
        padding: 250px;
    }

    footer {
        background-color: #333;
        height: 60px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

仅在一个页面上的多个图像背景

3 个答案: