早上好！將圖像上的文字與CSS結合使用
我有一個圖像和文字我想合併。我已經包含了我想要的最終結果。到目前爲止，大約有20個小時的時間，我似乎無法使用圖像的各個部分創建一張桌子。 （我最後的結果：tradecaptain.com/landingpage）我可以發佈我寫的CSS，但由於我是新手，並且全部是內聯的，所以這是一團糟。我已經添加了圖像，我想要到網頁上的最終結果，因爲我無法在此發佈圖像。它低於我上次嘗試表的結果。
我只是將我的圖像與文字放在一起，形成一個真正的大圖像。我希望任何指向正確方向的指針。如果可能的話。
謝謝大家！
嘗試這樣：
CSS
#img{
width: 200px;
height: 200px;
background-image:url(yourImage.png);
background-repeat:no-repeat;
background-position: top left;
}
#txt{
position: absolute;
margin-left: 20px;
margin-right: 20px;
}
HTML
<div id="img">
<div id="txt">
your text
</div>
</div>
Here's my work如何完成它。
HTML：
<div id="sample">
<div class="a"><div>Take command of your trading</div></div>
<div class="b">with the </div>
<div class="b">Moneymap</div>
<div class="a"><div>Trade the market with confidence</div></div>
</div>
CSS：
#sample {
width:864px;
height:264px;
background-image:url('http://tradecaptain.com/images/CommandMountain.png');
background-repeat:no-repeat;
background-position:right;
}
.a{
text-align:center;
font-size:50px;
}
.a div
{
background:yellow;
width:80%;
margin:0 auto;}
.b{
width:350px;
text-align:right
}
只是給你的想法。
希望你設法完成它。
這種方式，您可以結合文本的背景圖像。 Ofcoure你必須玩的價值，以適應你的設計，但虛擬的概念在這裏。
這裏是CSS和HTML代碼。這裏是工作的Demo鏈接。
--- CSS代碼---
header{display:block;}
div#bgimage
{
background:url("http://lorempixel.com/400/284") no-repeat center right;
width:670px;
height:284px;
}
div#bgimage p
{
font:arial;
font-size:1.2em;
width:290px;
margin:0; padding:0;
}
div#bgimage h3 em, div#bgimage h3
{
font-size:1.5em;
word-break: break-all;
width:260px; display:block;
text-align:right;
margin:0 0;
padding:0;
}
h1, h2
{
background-color:rgba(245, 217, 110, 0.5);
color:#2D2376;
font-size:2.1em;
display:inline-block;
text-align:right;
margin:5px 0; padding:5px 0;
}
---- HTML代碼---
<header>
<div id="bgimage">
<h1>Take Command of your Trading </h1>
<h3>with the <em>Money Map</em></h3>
<h2>Trade the markets with confidence</h2>
<p>Read the Market. Rule your Risk. Take the Money.
Trade Forex, futures, commodities and stocks</p>
</div>
</header>
這個演示對你有幫助嗎？ –
謝謝大家對你的慷慨時間和幫助！我是新來的CSS，所以這不僅對這種情況有用，而且對我的學習過程也有幫助。我已經打電話給天堂了，並且爲你們所有人預留了頭等艙的座位:)
我不得不隨身攜帶，讓它看起來像我想要的。希望我沒有做任何無效的事情。我只在Chrome上測試過它。這是我最後用去：
HTML
<div id="LandingImage">
<h1>
Take Command of your trading</h1>
<h2>
with the</h2>
<h3>
Moneymap</h3>
<p><text1>Read the market. Rule your risk. Take the money.</text1> <text2>Trade forex, futures, commodities and stocks.</text2></p>
<h4>
Trade the markets with confidence</h4>
CSS
header{display:block;}
#LandingImage {
background:url("http://tradecaptain.com/images/CommandMountain.png") no-repeat center right;
margin:50px 0px 0px 0px;
width:856px;
height:284px;
}
#LandingImage h1 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:0px 0px 0px 50px;
padding:15px 8px 15px 8px;
}
#LandingImage h2 {
font-size:28px;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage h3 {
font-size:50px;
word-break: break-all;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage text1 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:348px;
padding:0px 0px 0px 0px;
margin:35px 0px 0px 0px;
}
#LandingImage text2 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:339px;
padding:0px 0px 0px 0px;
margin:5px 0px 0px 25px;
}
#LandingImage h4 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:4px 0px 0px 5px;
padding:15px 8px 15px 8px;
}
當然，這不是漂亮。但是，嘿，我是新的;）任何進一步的教育指針表示讚賞。現在我想弄清楚如何在它下面放置兩個鏈接和另一個表格！祝我好運。
感謝， 亞歷山大
你可以發佈你的代碼和例子嗎？ –
你能給我們一個JSFiddle嗎？ –