Html 如何在div页面上显示图像
我有一个html，在这个html中我创建了一个吃豆人游戏。在这个游戏中，我的吃豆人正在吃一个有黄色背景的div。但是我想让我的pacman吃图像而不是div。例如，在第一个div food-1中，我想放置图像abc1.jpg，而对于food-2 div，图像应该是abc2.jpg等等。我尽了最大努力，但未能做到这一点。请帮助我实现这一目标 这是我的密码 pakman.htmlHtml 如何在div页面上显示图像,html,css,Html,Css,我有一个html，在这个html中我创建了一个吃豆人游戏。在这个游戏中，我的吃豆人正在吃一个有黄色背景的div。但是我想让我的pacman吃图像而不是div。例如，在第一个div food-1中，我想放置图像abc1.jpg，而对于food-2 div，图像应该是abc2.jpg等等。我尽了最大努力，但未能做到这一点。请帮助我实现这一目标 这是我的密码 pakman.html <html> <head> <link rel="stylesheet" type="te
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<div class="food food-1"></div>
<div class="food food-2"></div>
<div class="food food-3"></div>
<div class="food food-4"></div>
<div class="food food-5"></div>
<div class="food food-6"></div>
<div class="food food-7"></div>
<div class="food food-8"></div>
<div class="food food-9"></div>
<div class="food food-10"></div>
<div class="food food-11"></div>
</div>
</body>
</head>
</html>
应该很容易，只要将
divimgsrc <img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>
查看最左边的一个：应该很容易，只要将
divimgsrc <img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>
干得好。。。您可以将foods div背景设置为所需图像。或者用img代替div…干得好。。。您可以将foods div背景设置为所需图像。或者用img代替divs…很乐意帮忙。如果我已经解决了您的问题，请单击复选标记接受答案。很高兴为您提供帮助。如果我已经解决了您的问题，请单击复选标记接受答案。
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTVAbva29vJgnTKwTJmda-Rvod1hxx0NyCV_m9eeSNXJotaBD-" class="food food-1"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMR5x8vDhDIz7ydtIsCGjOg8HY30fCfW-eEFsI7kydkv93yQJq " class="food food-2"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKovb82eqcasgtuu1vNMcQrwmno1ebHR6_OGhQKN2Ahq2edADr" class="food food-3"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5xr4UoU50LojizDjBXPiWodrHzKALt_AwQvWbRyZuu5j-itGZ" class="food food-4"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlP6-Z7AX4P-0HCFN2RCiBMQo-H6ljKWBX84DN-Jl92tzRPiCnww " class="food food-5"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_D8ibrS1OwZKqeHeA_8jl4dFcWPqHAPZ9hUdClrvDZvyhaFID" class="food food-6"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwib9lxt-zKm9NOqIJzRR8UOCiIv03si25pS3x5_iuJejoaZLv" class="food food-7"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvjZH6-vKtV-s2W5cgXTnchAgS9TYAcXj7U48XE_MNxJRe56vS" class="food food-8"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcJSD2u8YexpOp1GL3STmhrYt0LnTDy2o9YhfICu2DX0QCpCIn " class="food food-9"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdzRd944Fdkw4_fDcmmSH__EqJbItKn9tNoFLu906ZNxxSPvmMdA" class="food food-10"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSY6Z0MZA7eRpyMln8oWWszO-uDAI5be3omIn0BhmB1YNEXH80tg " class="food food-11"/>
</div>
</body>
</head>
</html>
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:20px;
height:20px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
@-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}