Question

我有以下HTML代码：

<div class="text-center">
  <div class="row">
    <div class="col-md-6">gdshdhfdhfdhfd</div>
    <div class="col-md-6"><img src="http://image.com/img.png" alt="cat"></div>
  </div>
<h4>header.</h4>
<p>hey there</p>
<div class="paddown">
<a class="btn btn-default" name="close" id="close" >Close</a>
</div>
</div>

我想在图片上添加任何文字（例如<span id="txt">lorem ipsum</span>），让我们说从底部到30-40px左右，这样就可以在猫面前看到＃＆＃39} 39; s图片。在不使用绝对定位的情况下是否可以在bootstrap中使用？

这是我的小提琴：http://jsfiddle.net/2wujw71x/3/

Answer 1

您可以使用img-thumbnail类作为基础进行一些小调整，然后在另一个类中设置文本重叠规则。

请参阅整页的代码段中的工作示例。

html,
body {
  margin-top: 50px;
}
.img-thumbnail.overlay {
  position: relative;
  border: none;
  margin: 0;
  padding: 0;
}
.img-thumbnail.overlay .caption {
  position: absolute;
  top: 45%;
  left: 0;
  margin: 0;
  padding: 10px 15px 0 15px;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}
.img-thumbnail.overlay .caption2 {
  position: absolute;
  top: 45%;
  left: 0;
  margin: 0;
  padding: 10px 15px 0 15px;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-md-6">
      <div class="img-thumbnail overlay">
        <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="" class="img-responsive">
        <div class="caption">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="img-thumbnail overlay">
        <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="" class="img-responsive">
        <div class="caption2">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

这种方法的一般想法是将图像包装在一个包含元素的元素中，该元素将占用图像本身的大小。您还在包装元素中包含overlay元素。

将position: relative;应用于包装器元素并将position: absolute;应用于overlay元素。包装元件上的相对定位防止绝对定位的元件定位在包装元件外部，该包装元件恰好与我们的图像尺寸相同。我们现在有一个“viewport”用于覆盖元素，其大小与图像相同并位于图像上方。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>
                Lorem Ipsum
            </p>
        </div>
        <div class="col-md-6">
            <span class="overlay-wrapper">
                <img class="img-responsive" src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="Cat"/>
                <div class="text-overlay">
                    Caption
                </div>
            </span>
        </div>
    </div>
</div>

.overlay-wrapper {
    position: relative;
    display: inline-block;
}
.text-overlay {
    position: absolute;
    width: 80%;
    background: rgba( 0, 0, 0, .5 );
    top: 75%;
    left: 10%;
    color: #fff;
    text-align: center;
}
@media( min-width: 300px ) {
    .text-overlay {
        padding: 1em 0;
        top: 65%;
    }
}
@media( min-width: 550px ) {
    .text-overlay {
        padding: 2em 0;
    }
}

http://jsfiddle.net/o2cjkyow/

我在我的示例中包含了一些媒体查询，因此您可以看到有关如何调整各种视口大小的各种属性以进行微调的演示。

这是我的JSFiddle from the comments。

Answer 3

我建议使用相对定位而不是绝对定位，这样你的位置总是相对于图像及其容器。

.my-floating-text{
    position: relative;
    top: 110px;
    left: 0px;
}

在你的HTML中：

<div class="text-center">
                             <div class="row">
                                <div class="col-md-6"><div class="my-floating-text">gdshdhfdhfdhfd</div><img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="cat" />
                                    </div>
                            </div>
                                <h4>header.</h4>
                                <p>hey there</p>
                                <div class="paddown">

                                    <a class="btn btn-default" name="close" id="close" >Close</a>
                                </div>
                            </div>

http://jsfiddle.net/2wujw71x/5/

Answer 4

您可以尝试使用<div class="text-center"> <div class="row"> <div class="col-md-6 aclass"> <div class="auto"> gdshdhfdhfdhfd </div> </div> <div class="col-md-6"> <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="cat"></div> </div> <h4>header.</h4> <p>hey there</p> <div class="paddown"> <a class="btn btn-default" name="close" id="close" >Close</a> </div> </div>

<强> HTML：

.aclass {
   position: absolute; 
   left: 50%;
}
.auto {
    position:relative;
    top:50px; /*position to top*/
    left:-50%;
    z-index:9999;
    color:#fff;
}

<强> CSS：

wp_enqueue_script( 'jquery', '//fake-jquery-script.js', [], null );

DEMO

文字永远是中心！：）

Answer 5

只想发布另一种方法，包括图形和图形。这两个元素不是必需的，但它们确实使它变得美观和语义。解决方案本身仍然存在于CSS中。使用填充和绝对底部允许容器使用多行文本进行缩放。

<强> HTML

<figure>
    <img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="cat">
    <figcaption>This is cat, playing violin</figcaption>
</figure>

<强> CSS

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    background: rgba(255,255,255,0.3);
    box-sizing: border-box;
    bottom: 0;
    font-weight: bold;
    width: 100%;
    padding: 10px;
    position: absolute;
    z-index: 10;
}

http://jsfiddle.net/2wujw71x/10/

有没有办法在bootstrap中的图片上显示html文本？

5 个答案: