Question

我正在尝试制作带有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

Answer 1

您缺少absolute在英雄图像中定位元素的信息。这样，您可以通过设置每个控件的顶部，右侧，底部和左侧，强制使其停留在其中的某个位置。不要忘记将父级英雄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格式并添加了新样式。现在，它显示为您的设计，但您需要应用相关的字体系列。

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

带有按钮的响应英雄图像+框内文字问题

2 个答案: