如何沿着圖像底部放置文字？

-2

如何在圖像上方放置文本，使其穿過圖像的底部。如何沿着圖像底部放置文字？

即

<div class="i_have_an_image"> 
<h2>I appear on top of the image, but aligned along the bottom</h2> 
</div>

我奮力去解決它，看看我的意思，下面的網站，有一個很好的例子。我以前見過它的網站，繼承人我的意思的例子快照：

來源

2016-06-21 Jacob

底部件是具有低不透明度 –

@Paulie_D疊加一個div沿__bottom__圖像。 – Jacob

@NitinDhomse是的。 – Jacob

將圖像包裝在inline-block div中，該div具有position:relative。

位置h2絕對與bottom:0和width:100%和h2的高度將自動調整到定位元素的含量。

.i_have_an_image { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.i_have_an_image img { 
 
    display: block; 
 
} 
 
.i_have_an_image h2 { 
 
    position: absolute; 
 
    margin: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width:100%; 
 
    padding: 1em; 
 
    background: rgba(255, 255, 255, 0.5); 
 
    color: white; 
 
}

<div class="i_have_an_image"> 
 
    <img src="http://www.fillmurray.com/460/300" alt=""> 
 
    <h2>I appear on top of the image, but aligned along the bottom</h2> 
 
</div>

來源

2016-06-21 10:14:37

你可以這樣說：我只加了「包裝」的div

.wrap { 
 
    max-width: 300px; 
 
} 
 
h2 { 
 
    position: relative; 
 
    top: -78px; 
 
    opacity: 0.8; 
 
    background: #222222; 
 
    color: #fff; 
 
}

<div class="i_have_an_image"> 
 
    <div class="wrap"> 
 
    <img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370"> 
 
    <h2>I appear on top of the image, but aligned along the bottom</h2> 
 
    </div> 
 
</div>

來源

2016-06-21 10:13:07 Molarosa

豪你可以用Flexbox，就這樣做只是這樣的：

.imageWrapper { 
 
    width: 200px; 
 
    height: 300px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-start; 
 
    border: 1px solid black; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg"); 
 
    background-size: 100%; 
 
} 
 

 
.textAboveImage { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: grey; 
 
    z-index: 200; 
 
    opacity: 0.5; 
 
}

<div class="imageWrapper"> 
 
    <div class="textAboveImage">I'm text</div> 
 
</div>

乾杯。

來源

2016-06-21 10:13:22 MrBuggy

.i_have_an_image{ 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
h2{ 
 
    position:absolute; 
 
    bottom:0px; 
 
    background:rgba(0,0,0,0.5); 
 
    color:#fff; 
 
    margin:0px; 
 
}

 
 
     
 
<div class="i_have_an_image"> 
 

 
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg"> 
 
    <h2>I appear on top of the image, but aligned along the bottom</h2> 
 
</div>

來源

2016-06-21 10:16:21

.butFrame { 
 
    width: 32%; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.butFrame .butHeading { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding: 10px 0; 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    margin: 0; 
 
    font-family: inherit; 
 
    font-size: 1.2em; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
}

<div class="butFrame"> 
 
    <img src="https://unsplash.it/g/380/210?random"> 
 
    <div class="butHeading">Heading</div>

https://jsfiddle.net/n0aLts9w/

來源

2016-06-21 10:17:01

帶標題和副標題的圖像的另一種解決方案。（根據你給定的圖像）

演示這裏

.i_have_an_image{ 
 
    position: relative; 
 
    background-image: url(http://i.imgur.com/McIDx6g.jpg); 
 
    background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 
.title_wrap{ 
 
    position: absolute; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 15px; 
 
    color: #ffffff; 
 
} 
 
.title_wrap h2 { 
 
    font-size: 20px; 
 
    margin: 0; 
 
} 
 
.title_wrap h6 { 
 
    font-size: 12px; 
 
    margin: 0; 
 
}

<div class="i_have_an_image"> 
 
    <div class="title_wrap"> 
 
    <h2>Heading goes here</h2> 
 
    <h6>I appear on top of the image, but aligned along the bottom</h6> 
 
    </div> 
 
</div>

來源

2016-06-21 10:20:15

你可以這樣說：我只加了「包裝」的div

HTML：

<div class="i_have_an_image"> 
    <div class="wrap"> 
    <img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370"> 
    <h2>I appear on top of the image, but aligned along the bottom</h2> 
    </div> 
</div>

CSS：

.wrap { 
    max-width: 300px; 
} 
h2 { 
    position: relative; 
    top: -78px; 
    opacity: 0.8; 
    background: #222222; 
    color:#fff; 
}

來源

2016-06-21 10:24:12 Molarosa

頂部：-78px是否強制一定的高度，然後如果標題包裝成兩行會導致問題？我認爲有一個解決方案可以讓你使用'vertical-align：bottom'，但是我還沒有設法解決它。 – Jacob

這就是我最近一直在做的事。它使用了新的html5標籤figltion

無論圖像有多大，或者你在figcaption中放置它應該如何工作都無關緊要。

figure.overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
figure.overlay figcaption { 
 
    position: absolute; 
 
    background: rgba(0, 0, 0, .5); 
 
    color: #fff; 
 
    bottom: 4px; 
 
    width: calc(100%-10px); 
 
    padding: 5px; 
 
}

<figure class="overlay"> 
 
    <img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg"> 
 
    <figcaption> 
 
    <h3> 
 
     'Some header of some sort!' 
 
     </h3> Words that make up a sentance! Or maybe 2 sentances. 
 
    <br /> 
 
    <br />Even with a new line 
 
    </figcaption> 
 
</figure>

來源

2016-06-22 12:32:04

如何沿着圖像底部放置文字？

回答

相關問題