包含椭圆形区域的文本

Question

我有一个html页面,如下所示:

我想在左窗格中显示一些文本,但问题是文本应该只在椭圆形区域内.我该如何实现这一目标？请注意,椭圆形图像是背景图像,但是如果需要,我也可以使用<img>标记,如果有帮助的话.一种蹩脚的方法是使用<p>带填充的标签,但这不是一种有效的方法,所以请提出一些好的方法.

编辑: HTML:

<div id="leftStage" class="rounded-corners">
  <div id="questionDisp" align="center">

  </div>
</div>

CSS:

#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}

JS: (当调用适当的函数时:)

$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1);  //data read from xml

编辑:我需要的是一个div或椭圆形背景之上的东西,文本应该适合它.我从xml文件中获取文本,因此我没有要显示的固定文本大小

Answer 1

您还没有共享任何 HTML，工作代码是有一些假设的

\n\n

HTML 是，

\n\n

<div id="main">\n<div class="text">This is text</div>\n</div>\xe2\x80\x8b\n

\n\n

其中带有 class 的 divtext是文本容器。

\n\n

相同的CSS将是，

\n\n

#main{\n    background-image:url(\'https://i.stack.imgur.com/bw2HK.png\');\n    height:563px;\n    width:691px;\n}\n#main .text{\n    color:#FF0000;\n    width:240px;\n    text-align:center;\n    top:100px;\n    border:1px solid;\n    float:left;\n    position:absolute;\n}\n

\n\n

\xe2\x80\x8b这里.text是表示文本样式的类。主要部分是position:absolute;. 这会将文本 div 位置设置为绝对位置。现在，您可以使用顶部和左侧样式将 div 移动到图像 div 上方。

\n\n

请在此处查看工作示例

\n\n

PS边框、颜色和其他样式可以根据您的需要进行更改。

\n