CSS在图像

Question

我不知道是否可能，但是<span>可变文本长度是否可以在图像上水平对齐？有一点是，我希望<span>有背景颜色，背景颜色块应该与图像重叠。

我已尝试将<span>设置为display:inline-block，但似乎不会最终水平对齐。如果您不想查看小提琴，则此处为代码（此处的HTML应保持相同，如果可能的话）

代码（https://jsfiddle.net/6c9gmvom/1/）：

#wrapper {
  width:100%;
}
.txt {
  text-align:center;
  margin:0 auto;
  width:40px; /* ideally I would not want to use a fixed width here */
  background-color:#ffffff;
} 
img {
  height:30px;
  width:100%;
}

<div id="wrapper">
  <img src="http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg">
  <div id="modulewrapper">
    <span class="txt">hey</span>
    <div id="module"></div>
  </div>
</div>

Answer 1

您可以将图像设置为背景图像...然后将范围设置为显示块.....

＆＃13;

＆＃13;

#wrapper {
  width:100%;
}
.txt {
  text-align:center;
  margin: 10px auto;
  background-color:#ffffff;
  display: block;
  text-align: center;
} /* ideally I would not want to use a fixed width here */
img {
  height:30px;
  width:100%;
}

#modulewrapper { 
  padding: 200px 0;
background: url(http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg) no-repeat center center; }

＆＃13;

<div id="wrapper">
  <div id="modulewrapper">
    <span class="txt">hey</span>
    <div id="module"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将其与c​​ss对齐。我已经更新了您的小提琴，请查看结果https://jsfiddle.net/6c9gmvom/8/

我添加的CSS是：

#wrapper {
  width:100%;
  position: relative;
}
#modulewrapper {
  text-align:center;
  position: absolute;
  top:0;
  left:0;
  right:0;
}

Answer 3

我不太确定我明白你在问什么。 如果我没有弄错你想要的是文本在图像的顶部。 这可以按照https://jsfiddle.net/6c9gmvom/9/

进行

 #wrapper {width:100%;position:relative}
.txt {
  position:absolute;
  text-align:center;
  margin:0 auto;
  width:40px;
  background-color:#ffffff; 
  z-index: 100;
  width:100%;
}
img {
height:30px;width:100%;
}

.imageClass{
  position:absolute;
   left: 0;
  top: 0;
}

Answer 4

.txt {
  text-align:center;
  margin:0 auto;
  width:100%;
  background-color:#ffffff;
  position: fixed;
  left: 0;
  top: 15px;
}
img {
  height:30px;
  width:100%;
  position: relatable;
}