如何获取代码文本叠加层和图像进行响应？

我正在尝试重新创建类似于以下图片的内容，减去右上角的小页面卷曲。如何获取代码文本叠加层和图像进行响应？

横幅例：

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，似乎也没有把它带入我的问题。但是，是的，我希望既能够响应，又能覆盖文字，以正确地放置图像本身。 –

如何获取代码文本叠加层和图像进行响应？

回答

相关问题