使用JavaScriptDOM隐藏图像，并仅使其在黑色背景上可见

[在此处输入图像描述][1]

我是JS新手，学习DOM。我正试图学习如何使用DOM进行旋转，请按照下面这个教程上的链接进行操作

不知何故，我不知道如何通过隐藏灰色背景上的其余部分来操纵它，而这些灰色背景本不应该是可见的。非常感谢您的帮助

[2] ：

您可以尝试以下方法：

用

元素包装

元素 给这个一个风格

    #clip {
      -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
      clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    }

看 有关兼容性详细信息，请参阅

var circle=document.getElementById（'circle'））
var upBtn=document.getElementById（'upBtn'）
var downBtn=document.getElementById（'downBtn'）
var rotateValue=circle.style.transform；
旋转变种；
upBtn.onclick=函数（）{
rotateSum=rotateValue+“旋转（-90度）”；
circle.style.transform=rotateSum；
rotateValue=rotateSum
}
downBtn.onclick=函数（）{
rotateSum=rotateValue+“旋转（90度）”；
circle.style.transform=rotateSum；
rotateValue=rotateSum
}

*{
保证金：0；
填充：0；
字体系列：无衬线；
}
梅因先生{
宽度：100%；
高度：100vh；
位置：相对位置；
溢出：隐藏；
背景：线性梯度（向右，#020007，#01060a）；
}
导航{
宽度：80%；
位置：粘性；
保证金：20px自动；
z指数：1；
显示器：flex；
对齐项目：居中；
}
.标志{
弹性基准：20%；
}
.logo img{
宽度：200px；
边界半径：10px；
位置：相对位置；
左-5雷姆；
}
.导航链接{
弹性：1；
文本对齐：右对齐；
}
.nav链接ul li{
列表样式：无；
显示：内联块；
利润率：0px 20px；
}
.导航链接ul li a{
颜色：#fff；
文字装饰：无；
}
.信息{
宽度：1000px；
高度：1000px；
位置：绝对位置；
最高：50%；
左-10%；
转化：translateY（-50%）；
}
#夹子{
-webkit剪辑路径：多边形（50%50%，100%0，100%100%）；
剪辑路径：多边形（50%50%，100%0，100%100%）；
}
#圈{
宽度：1000px；
高度：1000px；
排名：0；
左：0；
边界半径：50%；
变换：旋转（0度）；
过渡：0.4s；
}
.特征图像{
宽度：100px；
位置：相对位置；
对象匹配：包含；
边界半径：10%；
}
.特征{
显示器：flex；
颜色：#fff；
位置：绝对位置；
}
.专题组{
左边距：30px；
}
.专题组p{
边缘顶部：8px；
}
.一{
顶部：450px；
右：50px；
}
.二{
顶部：150px；
左：350px；
变换：旋转（-90度）；
}
.三{
底部：450px；
左：50px；
变换：旋转（-180度）；
}
.4{
底部：150px；
右：350px；
变换：旋转（-270度）；
}
char先生{
边界半径：10px；
位置：绝对位置；
宽度：200px；
最高：50%；
左：35%；
转化：translateY（-50%）；
z指数：1；
}
.控制{
位置：绝对位置；
右：10%；
最高：50%；
转化：translateY（-50%）；
文本对齐：居中；
}
.控制h3{
利润率：15px0；
颜色：#fff；
}
#向上{
边框：3倍纯色灰色；
宽度：20px；
光标：指针；
边界半径：10px；
变换：旋转（180度）；
}
#下行{
边框：3倍纯色灰色；
宽度：20px；
光标：指针；
边界半径：10px；
}
#向下：悬停{
宽度：21px
}
#向上：悬停{
宽度：21px
}
.覆盖{
宽度：0；
身高：0；
边框顶部：500px实心#ccc；
右边框：500px纯黑；
边框底部：500px实心#ccc；
左边框：500px实心#ccc；
位置：绝对位置；
左：0；
排名：0；
}
.封面1{
位置：绝对位置；
宽度：100px；
背景色：红色；
高度：100px；
}
.封面2{
位置：绝对位置；
}
.封面2{
职位：；
}

尼比
防御与攻击

尤比
全面防御

埃纳
全攻

戈壁
全攻

宠物

哦，天哪，它就像一个符咒。我从未想过它会与CSS一起工作。非常感谢。我怎样才能提高你的声誉？接受答案和/或投票（都是我答案的左边）