如何在响应式图像上添加椭圆形文本？ [英] how to add text in oval over responsive image?
本文介绍了如何在响应式图像上添加椭圆形文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含垂直椭圆形的图像。我想在Vertical Oval中显示文本。我的图像是响应性的，所以椭圆形应该响应。 图像响应垂直请帮助我。 tnx这是我的代码：
i have an image that iclude a Vertical Oval. i want to show text in Vertical Oval. my image is responsive so oval should be responsive. "image responsive on vertical" please help me. tnx here is my code:
<html lang="en">
<head>
<script src="_js/jquery.min.js"></script>
<script src="_js/jquery.rwdImageMaps.js"></script>
<title>About Me</title>
<style>
.responsive_image {
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
h3 {
position: absolute;
top: 126px;
width: 47%;
height: 920px;
bottom: -231px;
right: -379px;
margin:auto;
}
</style>
</head>
<body>
<div>
<img class="responsive_image" src="pics/About.jpg" alt="" usemap="#Map" />
<h3 style="width: 38%; height: 131%; ">some text</h3></div>
<map name="Map">
<area shape="circle" coords="1386, 749, 33" href="home.html">
</map>
</body>
<script>
$(document).ready(function (e) {
$('img[usemap]').rwdImageMaps();
});
</script>
</html>
推荐答案
（ document ）。ready（ function （e）{
(document).ready(function (e) {
（' img [usemap]'）。rwdImageMaps（）;
}）;
< / script >
< / html >
('img[usemap]').rwdImageMaps(); }); </script> </html>
在椭圆中添加文字是没有意义的。< map>的元素是定义纯几何的元素，没有任何可见的元素，并且它们不能有任何可见的子元素。它们仅用于定义可点击区域。请参阅：
https://developer.mozilla.org / en-US / docs / Web / HTML / Element / map [ ^ ]。
地图与某些图片相关联，这些图片可以包含usemap属性指向由name属性选择的map，其显示方式如下所示上面引用的文章中显示的代码示例。这是一个完整的想法：如果图像的某些部分是可点击的，那么图像应该提供视觉反馈是很自然的。如果你需要别的东西，你应该使用不同的技术，比如HTML5 Canvas或HTML嵌入式SVG。
因此，我甚至不想描述另一个可能性：使用绝对定位在图像上叠加一些文本元素。这很可能，但显然会滥用其他更简单的技术。
-SA
"Add text in oval" is something which makes no sense. The elements of<map>are the elements which define pure geometry, nothing visible, and they cannot have any visible children. They are only used to define clickable areas. Please see:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map[^].
The maps are linked with some images which can haveusemapattribute pointing to themapselected by itsnameattribute, the way it is shown in the code sample shown in the article referenced above. This is a whole idea: if some part of image is clickable, it's natural that the image is what should provide the visual feedback. If you need something else, you should probably use different technique, such as HTML5 Canvas or HTML-embedded SVG.
Therefore, I don't even want to describe another possibility: to overlay some text element over the image using absolute positioning. It's quite possible, but would be an apparent abuse of otherwise much simpler technique.
—SA
这篇关于如何在响应式图像上添加椭圆形文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
