如何獲取代碼文本疊加層和圖像進行響應？

我正在嘗試重新創建類似於以下圖片的內容，減去右上角的小頁面捲曲。如何獲取代碼文本疊加層和圖像進行響應？

橫幅例：

Banner Example

我被另一名設計師將代碼添加到先前編碼的網站。我首先單獨編碼，但無法讓文本和橫幅響應，儘管圖像是。我也不能像圖像本身那樣疊加它。

這是我的代碼如下，我知道這是簡單的東西，但似乎打到心理牆。

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
/*Header Image*/ 
 

 
.headerimage 
 
\t 
 
img 
 
{ 
 
} 
 

 
h1 
 
{ 
 
position: absolute; 
 
display: block; 
 
width: 100%; 
 
font-size: 1.45em; 
 
font-family: 'Roboto Slab', Rockwell, Serif; 
 
font-weight: bold; 
 
color: #FFF; 
 
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5); 
 
padding: .6em 1em .6em 1.7em; 
 
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%); 
 
} 
 

 
.interior-header img 
 
{ 
 
display: block; 
 
position: relative; 
 
width: 100%; 
 
height: auto; 
 
border: 1px solid #b22222; 
 
padding: 1px; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Test Heading</title> 
 

 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 

 
</head> 
 

 
<body> 
 

 

 
<div class="interior-header img> 
 
<div class="headerimage"> 
 

 
<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" /> 
 

 
<h1>Traffic Control</h1> 
 

 
</div> 
 
</div> 
 

 

 
</body> 
 
</html>

Traffic Violations Image

來源

2016-09-22 Veronica Jones

我相當肯定，如果您製作[jsfiddle.net]（http://jsfiddle.net）或[plunker]（http://plnkr.co），您獲得幫助的機會就會增加。 –

這是一個改進。不過，我認爲它會更好一些JSFiddle。（很難在代碼片段中測試某些東西的響應能力。）另外，根據所提供的信息，我無法告訴您想要什麼以及出了什麼問題。只是我的兩分錢。 :) –

我不想因此在這裏輸入你所有的代碼就是一個例子。

注意：當我發佈這一個，沒有代碼是起來的，我把它留下，以防它幫助別人。答案的代碼在答案的底部。 https://jsfiddle.net/norcaljohnny/5o95L0qy/

.box { 
background: grey; 
height: auto; 
width: 100%; 
} 
.text { 
font-size: 6vw 
}

更新：這是當前的jsfiddle。希望這可以幫助。 https://jsfiddle.net/norcaljohnny/65wnds86/

來源

2016-09-22 02:19:24

這是如何解決問題的？我不認爲我明白你想要完成什麼。 –

@Jefrén。我的理解是她希望盒子和文字能夠有所反應。他們都很敏感。請注意，當我發佈此答案時，我只看到了代碼圖片。 –

是的，先生，這是我想要做的。今晚我有點沮喪，之前從未使用過jsfiddle，似乎也沒有把它帶入我的問題。但是，是的，我希望既能夠響應，又能覆蓋文字，以正確地放置圖像本身。 –

如何獲取代碼文本疊加層和圖像進行響應？

回答

相關問題