Html 将图像上的文本与CSS相结合

早上好

我有一个图像和文字，我想结合起来。我已经包括了我想要的最终结果。到目前为止，大约20个小时后，我仍然无法使用图像的各个部分创建表格。（我的最后一个结果：tradecaptain.com/landingpage）我可以发布我写的CSS，但因为我是新的，而且都是内联的，所以很混乱。我已经添加了图片，这是我想要的最终结果，因为我不能在这里发布图片。它低于我上次尝试的表格的结果

我要把我的图片和文本放在一起，作为一个大图片。如果能给我指出正确的方向，我将不胜感激。如果可能的话

---

谢谢大家

试试这样的方法：

CSS

HTML

你的文字

关于如何完成它

HTML:

给你个主意

希望你能成功

---

通过这种方式，您可以将背景图像与文本组合在一起。当然，你必须利用价值来适应你的设计，但是虚拟概念就在这里

下面是CSS和HTML代码。这里是正在运行的演示链接

---CSS代码---

----HTML代码---

掌握你的交易
用货币地图
自信地交易市场
阅读市场。控制你的风险。拿着钱。
交易外汇、期货、商品和股票

感谢大家的慷慨时间和帮助！我是CSS新手，所以这不仅对这个案例很有帮助，而且对我的学习过程也很有帮助。我给天堂打了电话，为你们所有人预订了头等舱的座位：）

我不得不摆弄它，让它看起来像我想要的。希望我没有做任何无效的事情。我只在Chrome上测试过。以下是我最终选择的：

HTML

当然，这并不漂亮。但是嘿，我是新来的；）如有任何进一步的教育建议，我们将不胜感激。现在我想知道如何将两个链接和另一个表放在下面！祝我好运

感激地，

---

Alexander

你能发布你的代码和一个例子吗？你能给我们一个JSFIDLE吗？这个演示对你有帮助吗？

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

<div id="img">
    <div id="txt">
        your text
    </div>
</div>

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

#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
}

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

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

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

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