Question

我做的CSS動畫橫幅，結果在這裏可以看到 http://nikatest.dlinkddns.com/webs/ypic/
問題是一些照片，我想添加一個HREF鏈接，當我做它攪亂了動畫，第一張圖片得到了href屬性，你可以看到它的體積更小，心不是安裝到相同長度的div爲他人在這裏的html代碼：

<header class="mainheader"> 

<div> 
<img class='photo' src="temp/temp/img/cut/camera.jpg" alt="camerra"/> 
<img class='photo' src="temp/temp/img/cut/girl.jpg" alt="asian student"/> 
<img class='photo' src="temp/temp/img/cut/kids.jpg" alt="campus kids"/> 
<img class='photo' src="temp/temp/img/cut/books.jpg" alt="books" onclick="javascript:location.href='http://www.flickr.com/photos/lemuelinchrist/2657001395/'" /> 
<img class='photo' src="temp/temp/img/cut/field.jpg" alt="cambridge" onclick="javascript:location.href='http://www.flickr.com/photos/ericatkins/7927420108/'" /> 
<img class='photo' src="temp/temp/img/cut/icl.jpg" alt="icl" onclick="javascript:location.href='http://www.flickr.com/photos/herry/2924207957/'" /> 
<img class='photo' src="temp/temp/img/cut/math.jpg" alt="math" onclick="javascript:location.href='http://www.flickr.com/photos/featheredtar/76976279/'"/> 
<img class='photo' src="temp/temp/img/cut/student.jpg" alt="student" onclick="javascript:location.href='http://www.flickr.com/photos/merchau/8548057127/'"/> 
<img class='photo' src="temp/temp/img/cut/ucl.jpg" alt="ucl" onclick="javascript:location.href='http://www.flickr.com/photos/stevecadman/371199372/'"/> 



</div> 
<!-- <img src="temp/img/logo.gif">--> 
</header> 


</body> 

在臨時文件夾我的CSS文件ypicstyle.css看起來是這樣的：

.mainheader div/*.container*/{ 
/*margin:50px auto;*/ 
width: 100%; 
height: 300px; 
margin: 2% 0; 
/*width:500px; 
height:300px;*/ 
overflow:hidden; 
border:0px solid; 
border-top-color:#856036; 
border-left-color:#5d4426; 
border-bottom-color:black; 
border-right-color:#5d4426; 
position:relative; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
} 
.photo{ 
position:absolute; 
width:100%; 
height:auto; 
-webkit-animation:round 36s infinite; 
-moz-animation:round 36s infinite; 
-ms-animation:round 36s infinite; 
-o-animation:round 36s infinite; 
animation:round 36s infinite; 
opacity:0; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

} 

@keyframes round{ 
11.1%{opacity:1;} 
/*25%{opacity:1;} */ 
22.2%{opacity:0;} 
} 

@-webkit-keyframes round{ 
11.1%{opacity:1;} 
22.2%{opacity:0;} 
} 
img:nth-child(1){ 
/*animation-delay*/ 
-webkit-animation-delay:0s; 
-moz-animation-delay:0s; 
-ms-animation-delay:0s; 
-o-animation-delay:0s; 
animation-delay:0s; 
} 
img:nth-child(2){ 
/*animation-delay*/ 
-webkit-animation-delay:4s; 
-moz-animation-delay:4s; 
-ms-animation-delay:4s; 
-o-animation-delay:4s; 
animation-delay:4s; 
} 
img:nth-child(3){ 
/*animation-delay*/ 
-webkit-animation-delay:8s; 
-moz-animation-delay:8s; 
-ms-animation-delay:8s; 
-o-animation-delay:8s; 
animation-delay:8s; 
} 
img:nth-child(4){ 
/*animation-delay*/ 
-webkit-animation-delay:12s; 
-moz-animation-delay:12s; 
-ms-animation-delay:12s; 
-o-animation-delay:12s; 
animation-delay:15s; 
} 
img:nth-child(5){ 
/*animation-delay*/ 
-webkit-animation-delay:16s; 
-moz-animation-delay:16s; 
-ms-animation-delay:16s; 
-o-animation-delay:16s; 
animation-delay:16s; 
} 

img:nth-child(6){ 
/*animation-delay*/ 
-webkit-animation-delay:20s; 
-moz-animation-delay:20s; 
-ms-animation-delay:20s; 
-o-animation-delay:20s; 
animation-delay:20s; 
} 

img:nth-child(7){ 
/*animation-delay*/ 
-webkit-animation-delay:24s; 
-moz-animation-delay:24s; 
-ms-animation-delay:24s; 
-o-animation-delay:24s; 
animation-delay:24s; 
} 

img:nth-child(8){ 
/*animation-delay*/ 
-webkit-animation-delay:28s; 
-moz-animation-delay:28s; 
-ms-animation-delay:28s; 
-o-animation-delay:28s; 
animation-delay:28s; 
} 

img:nth-child(9){ 
/*animation-delay*/ 
-webkit-animation-delay:32s; 
-moz-animation-delay:32s; 
-ms-animation-delay:32s; 
-o-animation-delay:32s; 
animation-delay:32s; 
} 
/*<<<<<slider end>>>>>>>>>>*/ 

body { 
/* background-image: url('img/bg.jpg'); */ 
color: #000305; /*mostly black*/ 
font-size: 87.5%; /*base font size is 14px */ 
font-family: Arial, 'Lucida Sans Unicode'; 
line-height: 1.5; 
text-allign: left; 
background-color: #fff; 
} 

a { 
text-decoration: none; 
} 

a:link, a:visited { 
color: #26a4fb; 
} 

a:hover, a:active { 
background-color: #26a4fb; 
color: #FFF; 
} 

.body { 
margin: 0 auto; 
width: 70%; 
clear: both; 
} 

.mainheader img { 
width: inherit; 
height: inherit; 
margin: 2% 0; 
} 

.mainheader nav { 
background-color: #FFF; 
opacity: 0.8; 
height: 120px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
} 

/*menu icon*/ 
#menu-icon { 
display: none; 
width: 10px; 
height: 15px; 
/*background: url('img/menu.jpg'); 
/*opacity: 0.1;*/ 
background-repeat: no-repeat; 
} 

我試圖在這裏適當格式化半小時，但似乎沒有工作... 所以有人有建議如何我可以實現鏈接到我的圖片沒有它對css動畫有任何影響？謝謝大家:::: :::::編輯::::: 奧奇任何人都可以告訴我什麼即時做錯了？也許我有動畫定時關閉，也許這個和其他的東西，但即時通訊讓你非常沮喪，因爲你可以看到如果你嘗試的例子的網址，一些圖片沒有鏈接，有些但只要我點擊任何圖片發送我到最後一個的鏈接..有人可以幫忙嗎？

Answer 1

您還應該添加width：inherit和height：繼承元素，並查看它到達的位置。

Answer 2

另一種選擇是使用這樣的錨：

<a class='photo img1' href=''></a> 
<a class='photo img2' href=''></a> 

.photo { 
    display: block; 
    width: 200px; 
    height: 100px; 
    background-image: url(image-link); 
} 

.photo.img1 { 
    background-image: url(image-link-1); 
} 
.photo.img2 { 
    background-image: url(image-link-2); 
}