부트 스트랩 3.1에서 이미지 위에 텍스트를 표시하는 방법

이미지 위에 표시되는 텍스트를 추가하고 싶습니다. 기본적으로 부트 스트랩 3.1에서 이미지 위에 텍스트를 표시하는 방법

,이 같은 내 코드가 어떻게 생겼는지 :

<div class="ek-background"> 
<div class="row"> 
<section id="container"> 
    <div class="container col-sm-4 col-sm-offset-2"> 
    <div class="pull-right"> 
     <h1>TITLE HERE</h1> 
      <h2>Let us build your preview for free</h2> 
    </div> 
     <img src="img/img/flow-1.png" class="align-center img-responsive"> 
      <div class="col"> 
       <div class="col-sm-4"> 
        <p>this is a test</p> 
    </div> 
</div> 
</div>

내가 얻을 관리 할 수 없습니다 이미지의 제안 된 부분 위에 "이 테스트입니다."

모든 것을 일관되게 유지하기 위해 bootstrap.min.css 매개 변수를 사용하고 싶습니다. 이것은 반응 디자인 웹 사이트가 될 것입니다 때문에, 나는 누군가가 도움이 될 수 있다면, 그 위대한 :)

출처

2014-03-02 user2231397

의 중복 가능성 [CSS의 이미지 위에 텍스트를 배치하는 방법 (http://stackoverflow.com/questions/8708945/how-to- position-text-over-an-i mage-in-css) – davethecoder

http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css – davethecoder

나는 것 그것의 위치

을 잃지 않도록 이미지와 반응 할 텍스트를 걸려 부트 스트랩 클래스를 사용하여 이것이 가능하다고 생각하지 마십시오. 이미지에 thumbnail을 추가하고 thumbnail_legend을 다음 div로 추가하면됩니다. 에 의해 시작)

1 :

.thumbnail_legend { 
    background: none repeat scroll 0 0 #FFFFFF; 
    opacity: 0.5; 
    top:0; 
    left:0; 
    position: absolute; 
} 

.thumbnail { 
    position:relative; 
}

에서 : Bootstrap 3: Text overlay on image

출처

2014-03-02 00:08:23

이것이 작동하지 않았습니다. 텍스트가 이미지에 반응하지 않는 것 외에도 이미지가 축소됨에 따라 텍스트의 위치가 손실됩니다. 하지만 게시 주셔서 고마워 :) – user2231397

당신은 우리에게 당신이 정확히 무엇을 다루고 있는지의 아이디어를 제공하기 위해 추가 CSS를 붙여해야하지만 여기 내 2 센트 어쨌든입니다

<div class="imageAndText"> 
    <img src="img/img/flow-1.png" class="align-center img-responsive"> 
    <div class="col"> 
     <div class="col-sm-4"> 
      <p>this is a test</p> 
     </div> 
    </div> 
</div>

(주의, 원래 코드가 추가)

0 : 이미지와 그들에게 모두 포함 무언가에 텍스트를 배치

2) 절대 위치 + Z- 인덱스 추가 : 여기

.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

것은 jsFiddle가 보여주는 것 : http://jsfiddle.net/sX982/는

출처

2014-03-02 00:13:18

나는 질문을 주위에 갈 수있는 방법을 제안 할 수 있습니다 : 단일 항목과 회전 목마를 사용할 수 있습니다 , 당신은 자막에 회전 목마 이미지에 덕분에 텍스트를 삽입 할 수 있기 때문에 :

<div id="mycarousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="img/yourimage.png" alt="" class="img-responsive"> 
      <div class="carousel-caption"> 
      Insert your text here ! 
      </div> 
     </div> 
    </div> 
</div>

출처

2014-03-02 22:13:29

부트 스트랩 3.1에서 이미지 위에 텍스트를 표시하는 방법

답변

관련 문제