图像停留时的简单CSS文本

Question

您好我希望在图片上显示此文字。我希望文本位于两个人的左侧，并在我的媒体查询

中从桌面移动到平板电脑视图时保持与图像成比例

这是我的HTML

<figure><img src="Sources/USE/colors.png">

    <figcaption><h1>Your P<span class="orange">a</span>rtner in<br><br><span class="all"="colorstxt"><span class="green">C</span><span class="yellow">o</span><span class="orange">l</span><span class="red">o</span><span class="pink">r</span><span class="purple">s</span></h1></figcaption>

    </figure>

这是我的CSS

#hero_container figure{
    position: static;
    }   

#hero_container figure figcaption{
    position: relative;
    top: 200px;
    left: 100px;
    }

我试图让它位置绝对和相对，但它会使页面的其余部分跳到图像下方。对于一个简单问题的任何帮助将不胜感激。

Answer 1

静态定位是HTML元素的默认位置。尝试在图元素上使用相对定位，以便能够相对于图元素绝对定位图标题。

#hero_container figure{
position: relative;
} 

Answer 2

你差不多......

设置figure position: relative;，标题绝对定位。

#hero_container figure{
    position: relative;
    }   

#hero_container figure figcaption{
    position: absolute;
    bottom: 10%;
    left: 10%;
    }

Answer 3

静态位置是位置元素的默认状态。 你必须使用相对位置的数字和绝对的标题，如下所示：

#hero_container figure{
    position: relative;
}   

#hero_container figure figcaption{
    position: absolute;
    top: 200px;
    left: 100px;
}

Answer 4

这是修改后的代码 -

<强> HTML

  <div class="image">
      <img src="Sources/USE/colors.png" alt="" />
      <h2><span>Your Partner in<span class='spacer'></span><br /><span class='spacer'></span>Colors</span></h2>
</div>

<强> CSS

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

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}


h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

Answer 5

为什么没有带有更高z-index的div float？对我来说似乎更简单。