Question

我试图将两个图像放在一起，然后在悬停时在它们之间淡出...但是我无法正确对齐它们。我该如何做到最好？这很困难，因为我把第一张图片集中在一个细胞内...... 我试图在box1中对齐那些

.logo1 {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/ACE-white_pcfefd.png");
    width: 400px;
    height: 100%;
    background-size:contain;
    background-repeat: no-repeat;
     margin: 0 auto;
    padding: 10px;
    position: relative;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}
    .logo1bg {
        background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
        background-repeat: no-repeat;
        width: 400px;
        height: 100%;
        margin: 0 auto;
        padding: 10px;
        position: absoulte;
        top: 0;
        left: 0;
    }

Codepen将为此提供很多帮助。 http://codepen.io/pisoj1/pen/dOgjmJ

另外我有一个请求，如果有人知道如何在看笔时快速做到这一点...当它响应时，box1目前是放在堆栈顶部的顶部中间框...我想要box5现在这样做而不是box1，任何关于如何做的建议？谢谢

Answer 1

您可以移除第二个div并将更改.logo1的背景图片放在悬停

上

.box1:hover .logo1 {
  background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
  -webkit-transition: all 1000ms ease-in-out;
  -moz-transition: all 1000ms ease-in-out;
  -o-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
}

http://codepen.io/anon/pen/WoaKLe

Answer 2

为什么添加background-size: contain;？

我修改了它，检查Codepen

.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9 {
    width: 400px;
    height: 100%;

    background-repeat: no-repeat;
     margin: 0 auto;
    padding: 10px;
    position: absolute;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
}

http://codepen.io/anon/pen/RoeBve?editors=1100

如何将两个图像对齐在一起

2 个答案: