如何获得代码以使文本叠加层和图像具有响应性？
[英]How to get code a text overlay and image to be responsive?
问题描述
我正在尝试重新创建类似于以下图像的内容，减去右上角的小页面卷曲。
标语示例：
我正在将代码添加到另一位设计师先前编码的网站中。 我首先对其进行单独编码，但是尽管图像确实不能使文本和横幅响应。 我也无法像我希望的那样将其覆盖在图像本身上。
这是下面的代码，我知道这很简单，但是似乎遇到了麻烦。
@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>
1 个解决方案
解决方案1
3 2016-09-22 02:19:24
我不想输入所有代码，所以这里有个例子。
注意：发布此代码时，没有代码可用，我将其保留以防其他人使用。 答案的代码位于答案的底部。 https://jsfiddle.net/norcaljohnny/5o95L0qy/
.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}
更新 ：这是当前的JsFiddle。 希望这可以帮助。 https://jsfiddle.net/norcaljohnny/65wnds86/
带有文字叠加的自适应图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.