Question

是否修复了从正方形中裁剪圆形图像以消除留下的白色边框的问题。

我正在尝试使用动画css在静止的天空中旋转地球图像。现在，我正在努力抓住留下的白色边框裁剪我的形象。我目前没有Photoshop，我很难找到一个足够的免费照片编辑器。我的macbook air 2016模型应该在预览模式下具有此功能，但它没有高亮度，因此不可用，我不知道为什么。任何帮助都会很受欢迎，这太荒谬了！

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
       <!--animationlibrary githib url-->
        <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
    </head>
    <body>
    <div>
        <img  id="starrySky" src="img/stary_nebula.jpg" alt=""/>
    </div>
    <img id="earth" name="earthRotate"  src="img/my_round_earth.jpg" alt=""/>

    <style>
        img{
            position: absolute;
            left: -10px;
            top: -15px;

            height: 175px;
            width: 175px;
        }

        **this is what I have now....**
        div#earth{

            transform: skew(20px, -10px);
            transform: rotate(45deg);
            border-radius: 50%;
            overflow: hidden;
            width:150px;
            height:150px;
         }
          img#earth{


            background-image: url("https://s.yimg.com/fz/api/res/1.2           /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
        #earth{
            position: absolute;
            top: 0px;
            left: 600px;
            margin-top: auto;
            margin-right: auto;
            margin-bottom: auto;
            border-radius: 50%;
            -webkit-animation-name: earthOrbit;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 10s;
            overflow: visible;
        }
        @-webkit-keyframes earthOrbit{
            from{ -webkit-transform: rotate(0deg); }
            to{-webkit-transform: rotate(360deg);}
        }
        #starrySky{
            position: relative;
            top: -10px;
            left: -10px;
            width: auto;
            height: auto;
            margin-top: auto;
            margin-right: auto;
            margin-bottom: auto;
            text-align: center;
            font-size: 25px;
        }
    </style>
    </body>
    </html>

Answer 1

只需指定父级＆lt; div＆gt; 的大小，并在必要时使用overflow: hidden。

额外以裁剪不同的形状，只需转换父级＆lt; div＆gt; ，例如：

transform: skew(20px, -10px)，
transform: rotate(45deg)，
border-radius: 50%

如何在裁剪后从图像中删除白色边框？

1 个答案: