如何在div的地方显示图像

时间:2018-02-23 18:06:11

标签: html css

我有一个HTML,在这个HTML中我创建了一个pacman游戏。在这个游戏中,我的pacman正在吃一个黄色背景的div。但我希望我的pacman吃图像而不是div。例如在第一个div食物-1我想放置图像abc1.jpg和食物-2 div我的图像应该是abc2.jpg等等。我尽我所能但是不能这样做。请帮助我实现这一目标。

这是我的代码。

pakman.html

<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>

我的css文件是

pac.css

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:10px;
                height:10px;
                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;
                }
            }

Here is my jsfiddle

2 个答案:

答案 0 :(得分:2)

应该像更改divimg代码并添加src属性一样简单:

            <img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>

请参阅最左边的一个:https://jsfiddle.net/4xLu5szz/5/

答案 1 :(得分:1)

“使用图片代码”

  

示例:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

代码HTML:

<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>

CSS:

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;
                }
            }