Question

目前我正在尝试在图像顶部显示文字以及我正在组织它的方式，因为我有多个图像就像这样

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

现在我在textToBeOnTop div上将位置设置为relative，因为我想将它居中并为imageDiv设置动画，这意味着textToBeOnTop也必须移动。我也设置了边界。

所以我的问题是我可以看到边框，但不能看到文字。

有没有人有任何想法？

编辑：我应该放入原始帖子，图片动画通过CSS悬停，我需要找到一种方法来“忽略”文本在顶部，因为当div位于图像顶部时，悬停图像不会触发

由于

Answer 1

试试这个（Demo）

<div class="imageDiv">
    <img src="http://www.clker.com/cliparts/3/1/b/a/11971488211294199438barretr_Earth.svg.med.png">
    <div class="textToBeOnTop">Some text</div>
</div>

CSS

.imageDiv{
    position:relative;
}
.imageDiv .textToBeOnTop{
    position:absolute;
    left:50px;
    top:50px;
}

Answer 2

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

    }

Answer 3

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

您可以使用属性position，z-index和margin来获得过度留下深刻印象的文字，例如：

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

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

查看此工作jsfiddle

Answer 4

试试这个： -

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

Answer 5

尝试以下css代码

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

获取有关html中位置属性的信息 http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 6

在使用位置相对和绝对值的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>

信用：Display text on top of image

Answer 7

您的解决方案：Image with text aligned

<强> HTML

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

<强> CSS

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

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

Answer 8

我建议你使用背景图片。

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

您可以看到here

在图像上显示文本

8 个答案: