带有按钮 + 盒装文本问题的响应式英雄图像

Posted 2023-03-05

【中文标题】带有按钮 + 盒装文本问题的响应式英雄图像

【英文标题】：Responsive hero image with button + boxed text problems

【发布时间】：2019-01-23 23:07:29

【问题描述】：

我正在尝试制作一个带有 h1 标题的全角英雄图像，里面有 2 种大小的文本以及一个按钮的盒装文本。我整天都在为此苦苦挣扎，但它似乎并没有按照我想要的方式工作。任何帮助将非常感激。

谢谢

图片： How it looks at the moment with code

如果您注意到它没有全宽（左侧的间隙）。

This is how i would like it to look or close enough

 //css//    

.hero-image 
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;


.hero-text 
position: relative;
color: #154774;


.hero-text button 
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;  


.hero-text button:hover 
background-color: #0597c4;
color: white;

.herotext2 
 border-radius: 5px;
 padding: 10px 10px 10px 10px;
 color: white;
 background-color: red;
 font-size: 20px;
 width: 200px; 
 line-height: 1.4;
 
 </style>


 //html//

<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>

更新图片： Updated image

【参考方案1】：

.hero-image 
     background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 50px;

 .hero-text 
     position: relative;
     color: #154774;
     text-align:right;

 .hero-text h1 
     font-size:40px;
     margin-right:15%;

 .hero-text h1 .italic 
     font-style: italic;

 .hero-text button 
     border-radius: 5px;
     padding: 10px 20px;
     color: white;
     background-color: #00adee;
     text-align: center;
     cursor: pointer;
     font-size: 20px;
     font-weight: bold;
     bottom: 50px;
     max-width: 150px;
     margin-top: 25px;

 .hero-text button:hover 
     background-color: #0597c4;
     color: white;

 .herotext2 
     position:relative;
     border-radius: 5px;
     padding: 10px 10px 10px 10px;
     color: white;
     background-color: red;
     font-size: 20px;
     width: 200px;
     line-height: 1.4;
     margin: 0 0 0 auto;
     text-align:left;

 .herotext2 .no 
     font-size: 135px;
     line-height: 130px;
     font-weight: 600;

 .herotext2 .tag 
    position: absolute;
     bottom: 26px;
     right: 30px;
     font-size: 12px;
    color: red;

<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>

https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/

我已经更新了您的 html 格式并添加了新样式。现在它显示为您的设计，但您需要应用相关的字体系列。

效果很好。让我知道是否有任何问题。 谢谢。

【讨论】：

非常感谢，我想我现在已经很接近了，只是图像扩展了整个宽度并且文本保持在框和按钮的边界内似乎是一个问题。我在原始问题中添加了一张照片以显示该问题。 i.stack.imgur.com/JN93k.png

@j4mes83，我看到了提出的问题，但没有看到代码就无法解决。给我一个 jsfiddle 或 sn-p 链接。然后我可以帮助你。

感谢您的回复，对不起，我不是一个编码员，所以不确定您希望我发送什么，我正在使用 wordpress。我可以链接到你的开发页面吗？否则我可以尝试通过更多信息找到您需要的内容，再次感谢

@j4mes83，是的，将我链接到您的开发页面。请把网址发给我。

@j4mes83，我找不到你的横幅区域。你把它们放在哪里了？

【参考方案2】：

您缺少absolute 定位英雄图像中的元素。这样，您可以强制它们停留在其中的某个点，方法是设置每个元素的顶部、右侧、底部和左侧。 不要忘记将父英雄 div 设置为position: relative。