left设置在正负150px以上就可以正常显示图片

.cr-bgimg div span{width:100%;height:100%;position:absolute;z-index:2;background-repeat:no-repeat;left:150px;}
.cr-container input.cr-selector-img-1:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(1)
{background:url(../images/1.jpg);}
.cr-container input.cr-selector-img-2:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(2)
{background:url(../images/2.jpg);}
.cr-container input.cr-selector-img-3:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(3)
{background:url(../images/3.jpg);}
.cr-container input.cr-selector-img-4:checked~.cr-bgimg,
.cr-bgimg div span:nth-child(4)
{background:url(../images/4.jpg);}

left设置在正负150px以上就可以正常显示图片，为什么？

weibo_纷纷的想念_0 2017-02-27

源自：CSS3图片切换特效 3-8 图片动画原理分析

收起

1回答

Hbrsql 回答被采纳获得+3积分 2017-02-27 12:53:48

span{left:0}时,才显示图片.

span的父元素为div{width:150px, overflow:hidden},

当left:-150px时,span对应的图片在div的左侧,看不到图片;

当left:150px时,span对应的图片在div的右侧,也看不到图片.

从而通过span的left:0/-150px/150px设置图片的显示与隐藏.

收起回答

weibo_纷纷的想念_0 提问者 #1

加了150px以上的数值后它的四张图片就都显示了要是left：0就只显示第四张图片

2017-02-27 15:29:07
weibo_纷纷的想念_0 提问者 #2

而此时按数字1234它对应的图片也出来了

2017-02-27 15:31:06
Hbrsql 回复提问者 weibo_纷纷的想念_0 #3

你的代码比老师的源码少了.cr-bgimg div span{text-indent: -9000px;},图片上方会显示span里的文字. 其他效果在Chrome浏览器里挺正常的,没看出问题来. 你在重新提问,描述详细一点,助教老师看到了会回答的.

2017-02-27 16:08:06