如何让代码文本覆盖和图像响应？答案

【问题标题】：How to get code a text overlay and image to be responsive?如何让代码文本覆盖和图像响应？
【发布时间】：2017-01-30 10:43:47
【问题描述】：

我正在尝试重新创建类似于下面这张图片的东西，减去右上角的小卷页。

横幅示例：

我正在将代码添加到另一个设计师以前编码的网站。我首先单独对其进行编码，但无法使文本和横幅响应，尽管图像是。我也不能让它像我希望的那样覆盖在图像本身上。

下面是我的代码，我知道这很简单，但似乎遇到了心理障碍。

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

/*Header Image*/

.headerimage
	
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

【问题讨论】：

我敢肯定，如果您发送jsfiddle 或plunker，您获得帮助的机会将会增加。
这是一个改进。但是，我认为作为 JSFiddle 会更好。（很难在代码 sn-p 中测试某些东西的响应能力。）此外，根据给出的信息，我无法判断您想要什么以及出了什么问题。只是我的两分钱。 :)

标签： html css image responsive

【解决方案1】：

我不想输入你所有的代码，所以这里是一个例子。

注意：当我发布这个时，没有代码出现，我把它留了下来以防它帮助别人。答案的代码在答案的底部。 https://jsfiddle.net/norcaljohnny/5o95L0qy/

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

更新：这是当前的 JsFiddle。希望这可以帮助。 https://jsfiddle.net/norcaljohnny/65wnds86/

【讨论】：

这如何解决问题？我想我不明白你想要完成什么。
@JefréN。我的理解是她希望框和文本能够响应。他们都反应灵敏。请注意，当我发布此答案时，我只看到了一张代码图片。
是的，先生，这就是我想要做的。今晚我有点沮丧，以前从未使用过 jsfiddle，似乎无法将其纳入我的问题。但是，是的，我希望两者都具有响应性以及文本叠加层能够正确地覆盖在图像本身上。
@VeronicaJones 我会用你的代码重新创建你的 Jsfiddle，给我几分钟。但是你从我之前看到的，响应式收缩的文字确实是你想要的？
@norcaljohnny - 我明白了！非常感谢您的帮助！你是一个绝对的救生员！