我想把一个文本标题放在图像的中间,但它总是切成两半,而且不会移动到中心。
<header class="text-center">
<img src="img\blueskycrop.jpg" class="img-fluid" alt="bluesky">
<div class="container">
<div class="row">
<div class="col-xl-9">
<h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1z\>
</div>
</div>
</div>
</header>发布于 2019-09-13 14:33:46
我想这就是你想要的..
在这里,文本标题在图像上,居中,而不是剪切。
header{
position: relative;
}
header img{
width: 100%;
}
h1{
position: absolute;
top: 0;
color: #fff;
left: 50%;
transform: translate(-50%, 0%);
text-align: center;
}<header class="text-center">
<img src="http://personal.psu.edu/xqz5228/jpg.jpg" class="img-fluid" alt="bluesky">
<div class="container">
<div class="row">
<div class="col-xl-9">
<h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1z\>
</div>
</div>
</div>
</header>
发布于 2019-09-13 14:41:42
如果我没理解错的话,你想在整个页眉上使用背景图片,大小为封面。然后去掉你的旧图片标签。文本大纲技巧由此答案Outline effect to text提供
header.text-center {
background: url(http://placekitten.com/700/700) center/cover;
color: white;
padding: 40px 0;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header class="text-center">
<div class="container">
<div class="row">
<div class="col-xl-9">
<h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1>
</div>
</div>
</div>
</header>
https://stackoverflow.com/questions/57918251
复制相似问题