Question

我需要在图像前放置一些弧形文字。然而，文本仍然显示在图像下方而不是在它上面。我已经尝试搞乱css和顶部对齐和位置元素无济于事。

请注意，当我不使用circleType

时，它可以正常工作

HTML：

<body>
  <div class="image" >
    <img id="sticker" src="MCNSticker.jpg">
        <h2 id="stickerText">13 Characters</h2>
            <script>
                $('#stickerText').circleType({radius: 2000});
            </script>   
    </img>
</div>
<form  onsubmit="return false" onclick=displayText()>
        Input car name here:  
        <input id="carName" type="text" name="lastname" value="Enter name">
        <input type="button" value="Submit">

</form>

<script>
    function displayText(){
    var carname     =document.getElementById("carName").value;
    var carSticker  =document.getElementById("stickerText");
        if(carname.length>13){
            alert("Car name too long");
        }else{
            carSticker.innerHTML = carname;
            $('#stickerText').circleType({radius: 2000});
        }
    }
</script>

</body>

CSS：

.image { 
       position: relative; 
       width: 100%; /* for IE 6 */
    }


h2 {    
   position: absolute; 
   top: 100px; 
   width: 1000px; 
   font-family: komika_axisregular;
   letter-spacing: 7px;
   font-size: 70px;
   text-align:center;
   color: black;
   text-transform: uppercase;
}

form{
    font-family: Verdana, Helvetica, sans-serif;
    font-weight: bold;
}

如何在图像上显示circletype.js文本

0 个答案: