响应式英雄图片有按钮+盒装文字问题

Question

我正在尝试制作一个带有 h1 header 的全宽主图，其中包含 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

Answer 1

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

Answer 2

.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 格式并添加了新样式。现在它显示为您的设计，但您需要应用相关的字体系列。

效果很好。如果有任何问题，请告诉我。谢谢

响应式英雄图片有按钮+盒装文字问题

Responsive hero image with button + boxed text problems

html

css

image

responsive