Question

我希望我的图片效果像link一样，我所做的就是这个link，但我的图片效果的初始点不正确。

我如何解决这个问题，就像切割边缘一样，它应该像包包图像效果一样位于包装盒内。

    <div id="mainContainer">
                <img id="introImg" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png"/>


        <div id="text1" style="position:absolute;">Striped Bag</div><br />
        <div id="text2" style="position:absolute;">$14</div><br />
        <div id="text3" style="position:absolute;">Sale $25</div><br />
</div>


 $(document).ready(function () {

        $("#text1").animate({ left: "+=30" }, 500);
        $("#text1").animate({ left: "-=20" }, 200);
        $("#text2").delay(300).animate({ left: "+=30" }, 500);
        $("#text2").animate({ left: "-=20" }, 200);
        $("#text3").delay(400).animate({ left: "+=30" }, 500);
        $("#text3").animate({ left: "-=20" }, 200);
     $("#introImg").animate({width: "100px"}, 1000);
    });

#mainContainer{
     background-image:url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
    width:300px;
    height:250px;

    overflow: hidden;
    position: relative

}

#introImg{
    position:absolute;
    top:60px;
    left:170px;
    border-radius: 50%;
    width:300px;
    opacity: 100;
    border: 1px solid black;
}

#text1, #text2, #text3
{
     margin:60px 8px;

}

#ctaBtn{
    top:200px;
    left:25px;
    position:absolute;
}

Answer 1

<强> JSFiddle

#mainContainer{
     background-image:url('http://i.imgur.com/ypFcNy9.gif');
    width:299px;
    height:249px;
    background-size: cover;
    overflow: hidden;
    position: relative

}

#wrapper {
    border: 15px solid rgba(186,202,228 , 1);  
    width:300px;
    height:250px;
    position: absolute;

我裁剪了你的图片并删除了它的边框。然后，我用#wrapper包裹它并放置CSS边框。现在图像并没有妨碍。

动画边框设置

1 个答案: