0

我有一个带有彩色背景的小图像，我想将它放在 HTML 页面的顶部右侧，并在左侧填充相同背景颜色的带，使其看起来像横幅。然后我希望页面的其余部分（文本）在横幅下方继续，而不是环绕图像。我更喜欢使用内联样式而不是 CSS，但两者都可以。

如果我可以在 HTML 语法上挥动魔杖，我会得到类似的东西：

<body>
<image-as-banner src='mylogo.jpg' align='right' background-color='black'>
<p>And my normal text starts here underneath the banner</p>
</body>

也就是说...如果我可以插入一行 HTML 来实现这一点，我想知道它是什么。它需要指定图像、它想要向右对齐的事实、横幅样式以及填充剩余空间的颜色是黑色。当然，image-as-bannerHTML 中没有标签。

4

3 回答 3

0

对于您上面粘贴的示例，这样的事情可能会奏效

<html>
<head></head>
<body>

<style type="text/css">
.img-banner {
    background-color: black;
    align: right;
    /* etc etc etc */
}
</style>

<div class="img-banner">
    <img src='mylogo.jpg' alt=''>
</div>

<p>And my normal text starts here underneath the banner</p>

</body>
</html>
于 2012-10-10T21:56:25.190 回答
0

我建议使用具有背景图像和颜色属性的 div 容器，如下所示：

CSS：

<style type="text/css">
#banner{
 background-image:url(images/banner.jpg);
 background-color: #$$$$$$;
 background-position: right;
 background-repeat: no-repeat;
 width: $px;
 height: $px;
}
</style>

HTML：

<div id="banner">
&nbsp;
</div>
于 2012-10-10T21:15:32.120 回答
0

像这样的东西..？

<html>
<style type="text/css">
#container{width:100%;margin:0 auto;height:100%;background-color:grey;}
#banner{width:100%;height:100px;background-color:red;}
img{float:right;height:100px;}
#text{}
</style>
<body>
    <div id='container'>
    <div id='banner'><img src='http://darmano.typepad.com/logic_emotion/images/red.jpg'>
    </div>
    <div id='text'>
    <h3>Put your text here..</h3>
    </div>
    </div>
</body>
<html>
于 2012-10-10T21:17:13.623 回答