在图片上移动文本

Question

在图片上移动文本

3

我希望将标题文本移到图片上方。将图片的底边距更改为-50％有所帮助，但是根据屏幕大小，文本会显着移动。

.banner{
    height: auto;
    width: 100%;
    max-width: 1200px;
    z-index: 1;
    text-align: right;
    color: white;
    margin: none;
    bottom margin: none;
}

.title h1{
    color: red;
    width: 100%;
    height:100%;
    margin: auto;
    z-index: 1;
    text-align: center;
    text-shadow: black;
    float:left;
}

.title p{
    color: red;
    text-align: center;
    float: left;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Joe's Garage</title>
        <link rel="stylesheet" type="text/css" href="Garage CSS">
    </head>
    <body> 
         <div class="banner">
             <img src="https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w">
         </div>
         <div class="title">
             <h1>JOE'S GARAGE</h1>
             <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p>
         </div>
    </body>
</html>

- Ryan

你想把标题放在图片中间吗？使用 flexbox 可以非常容易地实现这一点。 - Alexander Cardosi

是的，我试过了，但没有成功。 - Ryan

3个回答

1

如果您想在一个div中将文本放在图片上方，我有解决方案 :)

您可以使用一些flex指南（这对于CSS非常好）。

Flex指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 方法：我已经将.banner div用作.title和.text的容器。

.banner .content定义了margin（如果您想将标题等放在底部/左侧...）。

html, body {
    min-height: 100% !important;
    height: 100%;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  height:100%;
}

.banner {
  background: url(https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w) no-repeat center;
  background-size:cover !important;
  width:100%;
  height:100%;
  display:flex;
}

.banner .content {
  margin:5px 0 0 0;
  /** or margin auto if you want to centered the content, margin auto 0 0 0 if you want to align on the bottom...**/
}

.banner .title {
  font-weight:600;
  font-size:1.5em;
  margin:0 0 5px 0;
}

.banner .title, .banner .text {
  color:red;
}

<div class="banner">
  <div class="content">
    <div class="title">My title</div>
    <div class="text">My text</div>
  </div>
</div>

- Nepplot

0

.banner{
    height: auto;
    position: absolute;
    width: 100%;
    max-width: 1200px;
    z-index: 1;
    text-align: right;
    color: white;
    margin: none;
    bottom margin: none;
}

.title h1{
    position: absolute;
    color: red;
    width: 100%;
    height:100%;
    margin: auto;
    z-index: 1;
    text-align: center;
    text-shadow: black;
    float:left;
}

.title p{
    position: absolute;
    z-index: 1;
    top: 50px;
    color: red;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Joe's Garage</title>
        <link rel="stylesheet" type="text/css" href="Garage CSS">
    </head>
    <body> 
         <div class="banner">
             <img src="https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w">
         </div>
         <div class="title">
             <h1>JOE'S GARAGE</h1>
             <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p>
         </div>
    </body>
</html>

您可以添加position: absolute;来将文本放置在图像上方。

.banner{
    height: auto;
    position: absolute;
    width: 100%;
    max-width: 1200px;
    z-index: 1;
    text-align: right;
    color: white;
    margin: none;
    bottom margin: none;
}

- ethankhoa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bowheart · Accepted Answer

我肯定会使用background-image。毕竟这就是它的用途。

.banner {
    background-image: url('https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w');
    background-size: cover; // or 'contain', depending on what you want.
}

为了达到最佳效果，请将覆盖标记放在.banner容器内，添加一些height控制、background-position样式和您喜欢的垂直对齐技巧（假设您希望文本在垂直和水平方向上都居中）。

body {
    margin: 0;
}

.banner {
    align-items: center;
    background: url('https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w') center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 1200px;
    min-height: 100vh;
    text-align: center;
    width: 100%;
}

.title h1, .title p {
    color: red;
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px 4px black;
}

<div class="banner">
  <div class="title">
    <h1>JOE'S GARAGE</h1>
    <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p>
  </div>
</div>