[英]How to pad out an image to create a banner effect in HTML
我有一個帶有彩色背景的小圖像，我想將其放置在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來實現這一點，我想知道它是什么。 它需要指定圖像，它想與右邊對齊的事實，橫幅樣式，以及用於填充剩余空間的顏色是黑色。 當然，HTML中沒有image-as-banner標簽。
我建議使用具有背景圖像和顏色屬性的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">
</div>
像這樣..？
<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>
在上面粘貼的示例中，類似這樣的操作可能會解決問題
<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>
我怎樣才能創建這個 header 效果但背后有圖像？ HTML5
[英]How could I create this header effect but with an image behind it? HTML5
如何在鼠標 hover 上對 CSS 背景圖像創建縮小效果？
[英]How do I create a zoom out effect on a CSS background Image upon mouse hover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.