如何覆蓋橫幅上的文字，並使其響應頁面大小？

我的問題是「h1」文本沒有顯示，當我調整屏幕大小時，「p」文本在頁面上向下移動，不再在圖像上。如何覆蓋橫幅上的文字，並使其響應頁面大小？

下面是HTML：

<div id="home_header"> 
     <img src="resources/assets/home_header.png" alt="youth futures header"> 
     <h1>Hi</h1> 
     <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p> 

</div>

這裏是CSS

h1 { 
font-family: "quicksand-bold"; 
font-size:214px; 
line-height:244px; 
color:#ffffff; 
margin:0; 
width: auto; 
text-align:center; 
} 

.textstyle2 { 
font-family:"quicksand-bold"; 
font-size:38px; 
line-height:43px; 
color:#9ec54d !important; 
}

來源

2017-03-07 smithky3

由於圖像不是完整路徑，所以我看到圖像和p標籤之間是白色的。 H1與背景顏色相同（#ffffff）。你用什麼CSS將圖像作爲背景？如果您的圖像要以較小的屏幕尺寸進行擴展，那麼您需要一個高度較大的圖像作爲背景放置在div **或**上，您可以使用媒體查詢來調整h1周圍的線條高度，邊距和填充和不同屏幕上的段落標籤。 – Syfer

你的CSS代碼

.hero { 
     width:960px; 
     margin:1rem auto; 
     position: relative; 
    } 

    .text { 
     background:rgba(255,255,255,0.5); 
     position: absolute; 
     top:50%; 
     left:0; 
     padding:1rem; 
     transform:translateY(-50%); 

    }

而且你的HTML代碼

<div class="hero"> 
    <img src="http://lorempixel.com/output/city-q-c-960-480-4.jpg" alt="" /> 
    <div class="text"> 
    <h1>Hi</h1> 
     <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p> 
    </div> 
</div>

來源

2017-03-07 22:56:23

#home_header{position: relative;}將您的容器相對於其它元素，然後它裏面的內容定位與

img, h1, p { 
    position: absolute; 
}

現在你的DIV應該與你的形象相同的高度。然後根據容器元素#home_header調整元素的位置。例如，如果你想保持圖像的底部上方的段落10px的：如果你想h1

p {bottom: 10px;}

在圖像與10px的邊距頂部：

h1 {top: 10px;}

如果您要位置相對其保持在一起指定另一個容器元素爲h1和p並切換到#home_header

<div class="banner_text"> 
    <h1>...</h1> 
    <p>...</p> 
</div>

要將文本居中

.banner_text { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

來源

2017-03-07 23:10:09

如何覆蓋橫幅上的文字，並使其響應頁面大小？

回答

相關問題