Question

<div style="position: relative; left: 0px; top: 0px;"> 

<img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

<img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>

<div>

这是我的CSS

.container{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background-color: #ffffff;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    padding: 25px;
}

img.imageAAMP{
    width: 800px;
    margin: auto;
    margin-top: auto;
    position: static
}

img.imageAAMP2{
    width: 800px;
    position: absolute;
    margin-left: -800px;
    transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}

img.imageAAMP2:hover{
    opacity: 0;
}

当图像应显示在第一张图像的顶部时，图像位于左下角。这是为了进行悬停淡入淡出过渡。在Safari和Firefox上，一切正常，但在chrome上无法正确显示。

Answer 1

<div style="position: relative; left: 0px; top: 0px;"> 

            <img class="imageAAMP" src="catbanner.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: relative;"/>

            <img class="imageAAMP2" src="catbanner2.jpg" type="image/jpg" width="800" height="300" alt="Adios my petite croissant" style="position: absolute;"/>
<div>

HTML图片无法在Chrome中正确显示，但在Safari和Firefox

1 个答案: