具有固定位置图像的可缩放功能区域
我想创建一个CSS功能横幅,我可以在网页顶部显示。该横幅将包含一个可缩放的渐变作为背景,因此它始终保持在父div的100%,并且在div的每个末端(左侧和右侧)都有一个图像,这些图像保持固定在横幅的边缘。我还想在文字横幅的中心放置一个专用空间。具有固定位置图像的可缩放功能区域
我敢肯定,这是相当直接的,但我找不到任何教程专门定位在其他可扩展的div内的图像。
任何帮助将不胜感激。
罗斯
随着实验位,我已经成功地整理出以下解决方案:
不过,我几乎可以肯定会有不必要的代码在那里。任何人都可以看看这个,让我知道是否有简化代码的方法,所以它有点整齐。另外,你会注意到中间div继承了一些填充,导致它扩展到左右div的高度以外。如果有人有解决这个问题,你能告诉我吗?
再次感谢,
罗斯
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100%;
}
#container > div {
display: table-cell;
}
#left {
width: 200px;
height: 150px;
}
#middle {
width: 80%;
min-width: 400px;
max-width: 1000px;
height: auto;
color:white;
text-align:center;
display:table-cell;
vertical-align:middle;
/* fallback */
background-color: #1a82f7;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
#right {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>Responsive Banner Test</h1>
<div id="container">
<div id="left">
<img src="http://placehold.it/200x150">
</div>
<div id="middle">
<h3>Title goes in here</h3>
</div>
<div id="right">
<img src="http://placehold.it/200x150">
</div>
</div>
</body>
</html>
我不知道,但你的意思是这样的:
|图片|内容|图片|?
尝试与像一些申报单:
<div class="image-left">
<div class="image-right">
<div class="content">
<!-- rarndom content -->
</div>
</div>
</div>
并在CSS这样定义的样式(比如你在边缘想要的图片有大小50像素的宽度和高度):
.image-left{
background:url(/images/left-banner.png) no-repeat left;
height:50px;
padding-left:50px;
width:100%;
}
.image-right{
background:url(/images/right-banner.png) no-repeat right;
height:50px;
padding-right:50px;
width:100%;
}
.content{
/* you can also define styles for padding or whatever you want */
width:100%;
}
为高度插入图片或横幅的高度,并为填充左侧和填充右侧的值插入所需图片的宽度。当然,设置在URL中的权路径;)(我有一个类似的结构工作,这是工作)
假设你有相同的渐变背景图片的HTML代码如下所示:
<html>
<style type="text/css">
#banner{
width:100%;
height:400px;
background: url('bg.gif') 0 0 repeat;
}
.text-content{
width:960px;
margin: 0 auto;
/* background-color:#ffffff; */
}
</style>
<body>
<div id="banner">
<div class="text-content">
Lorem ipsum
</div>
</div>
</body>
</html>
嗨,感谢您的答复。我希望能够使用CSS渐变,这样我就可以在没有任何像素的情况下缩放内容。这会不会影响上面的代码(除了将bg.gif换成CSS渐变)。另外,由于其他用户的反应表明我想要image |渐变|图片 –
您好,感谢您的答复,这正是我想要的目的。我试着在代码中添加一些占位符图像,发现内容div与左图像重叠。此外,右侧的图像会在浏览器窗口右侧消失。这可能是我没有意识到的事情,但是你可以给我的任何帮助都是有用的。 –
尝试使用margin-left:50px; content-div和mybe margin-left:-50px;对于图像正确的div ...我不确定它是否工作,但我记得在我的特殊情况下我有这样的事情。 – user3278740
仍然无法正常工作。你知道是否有任何教程?我似乎无法找到一个涵盖我想要达到的内容 –