Question

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

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

我肯定会使用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>

Answer 2

如果你想在div中将图像放在图像上，我有解决方案：）

你可以有一些flex指南（对css来说非常好）。

Flex指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

方法：我使用.banner div作为.title and .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>

Answer 3

.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>

你可以添加位置：绝对;将文字放在图像上。

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

在图片上移动文本

3 个答案: