Question

早上好！

我想要合并的图片和文字。我已经包含了我想要的最终结果。到目前为止，大约20个小时，我似乎无法使用图像的各个部分创建一个表。（我的最后一个结果：tradecaptain.com/landingpage）我可以发布我写的CSS但是因为我是新的并且它都是内联的，所以它是一团糟。我已将图像，我想要的最终结果添加到网页上，因为我无法在此处发布图像。它低于我上一次尝试过的桌子的结果。

我只是将带有文字的图像放在一个非常大的图像上。我会很感激任何正确方向的指示。如果可能的话。

谢谢大家!!

Answer 1

尝试这样的事情：

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>

Answer 2

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
}

告诉你这个想法。

希望你设法完成它。

http://jsfiddle.net/EY2VP/1/

Answer 3

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

这是CSS和HTML代码。这是这里的工作演示链接。

http://jsbin.com/qunojidi/4/

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

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

Answer 4

感谢大家的慷慨时间和帮助！我是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;
}

当然，它并不漂亮。但是，嘿，我是新的;）任何进一步的教育指针都表示赞赏。现在我要弄清楚如何在它下面放置两个链接和另一个表！祝我好运。

感激，亚历山大

将图像上的文本与CSS结合使用

4 个答案: