具有固定位置图像的可缩放功能区域

我想创建一个CSS功能横幅，我可以在网页顶部显示。该横幅将包含一个可缩放的渐变作为背景，因此它始终保持在父div的100％，并且在div的每个末端（左侧和右侧）都有一个图像，这些图像保持固定在横幅的边缘。我还想在文字横幅的中心放置一个专用空间。具有固定位置图像的可缩放功能区域

我敢肯定，这是相当直接的，但我找不到任何教程专门定位在其他可扩展的div内的图像。

任何帮助将不胜感激。

罗斯

来源

2014-02-11 Ross P

随着实验位，我已经成功地整理出以下解决方案：

Demo

不过，我几乎可以肯定会有不必要的代码在那里。任何人都可以看看这个，让我知道是否有简化代码的方法，所以它有点整齐。另外，你会注意到中间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>

来源

2014-02-12 12:01:09

我不知道，但你的意思是这样的：

|图片|内容|图片|？

尝试与像一些申报单：

<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中的权路径;）（我有一个类似的结构工作，这是工作）

来源

2014-02-11 13:17:11 user3278740

您好，感谢您的答复，这正是我想要的目的。我试着在代码中添加一些占位符图像，发现内容div与左图像重叠。此外，右侧的图像会在浏览器窗口右侧消失。这可能是我没有意识到的事情，但是你可以给我的任何帮助都是有用的。 –

尝试使用margin-left：50px; content-div和mybe margin-left：-50px;对于图像正确的div ...我不确定它是否工作，但我记得在我的特殊情况下我有这样的事情。 – user3278740

仍然无法正常工作。你知道是否有任何教程？我似乎无法找到一个涵盖我想要达到的内容 –

假设你有相同的渐变背景图片的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>

来源

2014-02-11 13:35:22 Tonnao

嗨，感谢您的答复。我希望能够使用CSS渐变，这样我就可以在没有任何像素的情况下缩放内容。这会不会影响上面的代码（除了将bg.gif换成CSS渐变）。另外，由于其他用户的反应表明我想要image |渐变|图片 –

具有固定位置图像的可缩放功能区域

回答

相关问题