Question

编写HTML和CSS代码以旋转图片。

代码如下：

背景色：黄色和天蓝色是正确的，但是<img>标签中的图片（包含在li标签中的类别为<p1>至<p7> ，1.png到77.jpg）。

当我按F12进行调试时，可以看到这些图片的位置，但是这些图片没有显示。这些图片的路径正确。

CSS：

.rotation_box{
    width: 100%;
    height: 340px;
    background-color:yellow;
    position:relative;
}
.list {
    width: 1200px;
    height: 300px;
    overflow: hidden;
    position:absolute;
    left:50%;
    margin-left:-600px;
    background-color: skyblue;

}
.list li{
    position:absolute;
    left:0;
    top:0;
    list-style: none;
    opacity:0;
    transition:all 0.3s ease-out;
}
.p7 {
    transform:translate3d(1120px,0,0) scale(0.81);
}
.p6 {
    transform:translate3d(896px,0,0) scale(0.81);
}
.p5 {
    transform:translate3d(672px,0,0) scale(0.81);
}
.p4 {
    transform:translate3d(449px,0,0) scale(0.81);
    transform-origin:100% 50%;
    opacity:0.8;
    z-index:2;
}
.p3 {
    transform:translate3d(224px,0,0) scale(1);
    z-index:3;
    opacity:1;
}
.p2 {
    transform:translate3d(0px,0,0) scale(0.81);
    transform-origin:0 50%;
    z-index:2;
    opacity:0.8;
}
.p1 {
    transform:translate3d(-224px,0,0) scale(0.81);
}
.list li img{
    width: 751px;
    height: 300px;
    border:none;
    float:left;
}

HTML：

<div class="rotation_box">
        <div class="list">
            <ul>
                <li class="p7"><a href="#"><img src="images/test/1.png" title=""/></a></li>
                <li class="p6"><a href="#"><img src="images/test/2.png" title=""/></a></li>
                <li class="p5"><a href="#"><img src="images/test/3.png" title=""//></a></li>
                <li class="p4"><a href="#"><img src="images/test/44.jpg" title=""/></a></li>
                <li class="p3"><a href="#"><img src="images/test/55.jpg" title=""/></a></li>
                <li class="p2"><a href="#"><img src="images/test/66.jpg" title=""/></a></li>
                <li class="p1"><a href="#"><img src="images/test/77.jpg" title=""/></a></li>
            </ul>
        </div>  
    </div>

请告诉我原因和解决方法。

Answer 1

opacity（图像）的.list li设置为0，这应该通过删除或将此值更改为1来解决您的问题。

Answer 2

将opacity设置为0将使其透明。在每种情况下，opacity都将从.list li中获取，因为它有2个选择器，而.p2，.p3和.p4只有一个选择器。如果您编写此代码，则适用于那些元素：

.list li.p4 {
    transform:translate3d(449px,0,0) scale(0.81);
    transform-origin:100% 50%;
    opacity:0.8;
    z-index:2;
}
.list li.p3 {
    transform:translate3d(224px,0,0) scale(1);
    z-index:3;
    opacity:1;
}
.list li.p2 {
    transform:translate3d(0px,0,0) scale(0.81);
    transform-origin:0 50%;
    z-index:2;
    opacity:0.8;
}

不确定首先为什么将opacity设置为0。

li标签中的图片未显示

2 个答案: