Html 在图像顶部显示文本_Html_Css_Positioning_Typography

Html 在图像顶部显示文本

html css

Html 在图像顶部显示文本,html,css,positioning,typography,Html,Css,Positioning,Typography,目前，我正试图在图像顶部显示文本，我组织它的方式是这样的，因为我有多个图像 <div class="imageDiv"> <img ..... class=....> <div class="textToBeOnTop">Some text</div> </div> 一些文本现在我将位置设置为TextToBeantop div上的相对位置，因为我想将其居中并设置imageDiv动画，这意味着TextToBeant

目前，我正试图在图像顶部显示文本，我组织它的方式是这样的，因为我有多个图像

<div class="imageDiv">
    <img ..... class=....>
    <div class="textToBeOnTop">Some text</div>
</div>


一些文本

现在我将位置设置为TextToBeantop div上的相对位置，因为我想将其居中并设置imageDiv动画，这意味着TextToBeantop也必须移动。我还设置了边界

所以我的问题是我能看到边界，但看不到文本

有人有什么想法吗

编辑：我应该把原来的文章，图像动画悬停通过CSS，我需要找到一种方法来“忽略”文本的顶部，因为当div是在图像的顶部，图像的悬停不会触发

谢谢你试试这个（）

类textToBeOnTop的宽度应与img相同

   .textToBeOnTop{
     height:30px;
     width:auto;
    margin-top:-30px;
    position: relative;
    text-align:center;
    padding-top:8px;
    background-color:rgba(0,0,0,0.3);
    color:#000000;

    }

您不需要任何JavaScript代码，只需要CSS和HTML

您可以使用属性

position

、

z-index

和

margin

来获得一个印象深刻的文本，如下所示：

.myText {
    position: relative;
    margin: -100px 0 0 50px;
    z-index: 5;
}

.myImage {
    position: relative;
    z-index: 0;
}

检查此工作模式

尝试以下操作：-

<div class="imagediv" style="height: 100px; width:100px; display:block;">
<img src="some-img.jpg" style="display:block;"/> /*display as block ,you can ommit this property *?
<span style="position:absolute;">Text over image</span> /*An absolute position element is positioned relative to the first parent */
</div>


/*显示为块，可以编辑此属性*？
图像上的文本/*绝对位置元素相对于第一个父元素定位*/

尝试以下css代码

.textToBeOnTop {
    position: absolute;
    top: 0;
}

获取有关html中位置属性的信息

我建议您使用背景图像

<!DOCTYPE html>
<html>
<head>
<style>
.bgDiv 
{
background-image:url('http://www.clker.com/cliparts/3/1/b/a/11971488211294199438barretr_Earth.svg.med.png');
width:300px;
height:300px;
}
</style>
</head>

<body>
<div class='bgDiv'>
<h1>Hello World!</h1>
</div>
</body>

</html>


.bgDiv
{
背景图像：url（'http://www.clker.com/cliparts/3/1/b/a/11971488211294199438barretr_Earth.svg.med.png');
宽度：300px；
高度：300px；
}
你好，世界！

您可以在Css中使用相对位置和绝对位置查看

，您可以将文本置于图像顶部

例如：

.image {
  position:relative;
}

.text_on_top {
postion:absolute;
top:0px;
left:10px;
}


<div class="image">
    <p class="text_on_top">Text for Image on the top</p>
<div>

.image{
位置：相对位置；
}
.文本在顶部{
职位：绝对职位；
顶部：0px；
左：10px；
}
顶部图像的文本

信用证：

您的解决方案：

HTML

如果您有任何疑问，请随时询问

添加相关JS代码…@user3791979 Hi！：-）您可能希望添加示例代码或简单的JSFIDLE，以便更多的人能够在合理的时间内快速/帮助您。谢谢：-）请花点时间查看答案并选择一个正确的答案（或添加您的解决方案，如果不同）。问题是，我在原始帖子中没有解释（我应该有），是图像在悬停时会有动画，如果顶部的文本大小相同，CSS中的悬停不会触发，你有什么建议吗？虽然这个答案可以解决这个问题，但你应该详细解释一下，并解释一下你的代码是怎么做的。绝对位置元素相对于第一个父元素（类imagediv）定位…所以它总是在顶部..在给出绝对位置之后，您还可以设置“顶部”和“左侧”选项，将元素移动到您想要的任何位置，而不是对您的答案进行注释。您可能需要对其进行编辑以添加其他信息。虽然此答案可能会解决问题，但您应该对其进行详细说明，并解释代码的作用。

<!DOCTYPE html>
<html>
<head>
<style>
.bgDiv 
{
background-image:url('http://www.clker.com/cliparts/3/1/b/a/11971488211294199438barretr_Earth.svg.med.png');
width:300px;
height:300px;
}
</style>
</head>

<body>
<div class='bgDiv'>
<h1>Hello World!</h1>
</div>
</body>

</html>

.image {
  position:relative;
}

.text_on_top {
postion:absolute;
top:0px;
left:10px;
}


<div class="image">
    <p class="text_on_top">Text for Image on the top</p>
<div>

<div class="imageDiv">
  <img src="http://i40.tinypic.com/3531bba.jpg">
  Some text
</div>

    .imageDiv{
    height:200px;
    width:240px;
    text-align:center;
    vertical-align:middle;
    line-height:200px;
    position:relative;
    border:1px solid black;
    font-size:50px;
    color:white;
}

img{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index:-1;
    width:100%;
    height:100%;
}