Question

这个问题已在这里多次提出，但我没有找到答案。

我想在图像上水平和垂直放置一段文字（只有几个字）。

图片应该是img标签，而不是背景图片。

文本应通过调整浏览器窗口的大小来响应自我调整。（我的项目中有引导程序）

an screenshot of desired layout

Answer 1

在这里你去^^

＆＃13;

div {
  position: relative;
  width: 50%;
}
img {
  width: 100%;
}
p {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  margin: 0;
}

＆＃13;

<div>
  <p>ON SALE</p>
  <img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
</div>

＆＃13;

Answer 2

试试这个：

Auth0

.parent {
  position: relative;
}
img {
  width: 100%;
}
.text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  width: 20px;
  height: 20px;
  color: red;
}

Answer 3

试试这个......

并查看此链接了解更多信息...... https://css-tricks.com/text-blocks-over-image/

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    background: rgba(0, 0, 0, 0.8);
    z-index:100;
    position:absolute;    
    color:Yellow;
    font-size:1.5em;
    font-weight:bold;
    left:150px;   /* or in % */
    top:150px;
}

<div id="container">
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
    <p id="text">
        Hello World!
    </p>
</div>

Answer 4

您可以使用<figure>标记实现这一目标。我通常会对其进行设置，以便<figure>标记包含<img>和<div>，其中包含我想要的文字在同一级别。

  <figure>
      <img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg">
    <div class="info">
       Content goes here
    </div> <!-- /.info -->
  </figure>

CSS和<figure>标记具有相对定位，.info具有top: 0; bottom: 0; left: 0; right: 0和固定width的绝对定位。

figure {
    margin: 3px;
    display: inline-block;
    position: relative;
}

figure .info {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 300ms;
  background-color: rgba(233,233,233, .8);
  color: #333;
  margin: 15px;
  text-align: center;
}

如果您可能希望在.info容器中添加多行文字，则可以使用<div> flexbox定位的其他#include <iostream> template<typename opType, typename T> int operation(opType op, T a, T b) { return (a.*op)(1) + (b.*op)(1); } struct linear { int operator()(int n) const {return n;} int operator[](int n) const {return n * 10;} }; int main() { linear a, b; std::cout << operation(&linear::operator(), a, b) << std::endl << operation(&linear::operator[], a, b); return 0; }。

您可能会看到完整示例here

在图像上水平和垂直地响应中心文本

4 个答案: