移動圖片上的文本

我想將標題文本移動到圖片上。將圖片的底部邊距改爲-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>

來源

2017-07-10 Ryan

你想在圖像中間的標題？您可以使用[flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）輕鬆完成此操作。 –

是的，我願意！我剛纔嘗試過，但沒有運氣。 – Ryan

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

來源

2017-07-10 23:47:16 ethankhoa

如果你想有過在一個div形象的文字，我有解決方案:)

你可以有一些彎曲指南（這是很不錯的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>

來源

2017-07-11 00:23:43 Nepplot

我肯定會使用一個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>

來源

2017-07-11 00:23:52 bowheart

謝謝！我最初是以背景圖片的形式出現的，但我不知道如何展示div的高度並保持居中。 – Ryan

移動圖片上的文本

回答

相關問題