具有固定位置圖像的可縮放功能區域

我想創建一個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 |漸變|圖片 –

具有固定位置圖像的可縮放功能區域

回答

相關問題