使用CSS使我的漸變圖像垂直拉伸

這裏就是我得到現在： img ref

我需要的梯度垂直拉伸本身使用CSS。

下面是我的CSS + HTML的代碼。

<html> 
    <head> 
     <title>Test Site 1 - Color Palettes and Scheme Test</title> 
     <link rel="stylesheet" href="TestSiteCSS.css" type="text/css">  
    </head> 

    <body> 
     <div class="Content"> 
      <img src="Logo.png" alt="Logo MiCompra" /> 

      <H1>Bienvenidos a MiCompra!</H1> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p> 
      <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>      
     </div> 
    </body> 
</html>

/Separete CSS文件/

body 
{ 
    background-image: url("TestPatternClouds.png"); 
    background-repeat: repeat; 
    margin: auto; 
    width: 780px; /* or other value */ 
} 

.Content 
{ 
    margin: auto; 
    width: 780px; /* or other value */ 
    /*background-color: #4AD0EB;*/ 
    background-image: url("TestContentBackground.png"); 
    back 
}

來源

2009-09-02 Sergio Tapia

爲什麼不在doctype（http://doctype.com/）中提出這個問題？ – Graviton 2009-09-02 14:12:02

這裏很好。 – geowa4 2009-09-02 14:46:59

你不能伸展它。但是，您可以執行的操作是將其background-repeat更改爲repeat-x，並設置背景顏色等於圖像底部的顏色。這將顯示梯度只有一次垂直，然後用兩個

來源

2009-09-02 14:11:50 ceejayoz

2年，這個答案仍然幫助我！ – 2011-11-25 02:17:01

似乎是最好的解決方案，直到在CSS中廣泛支持漸變。 – 2012-02-20 18:29:51

我忘了強制重複只重複x。現在完美！ – plang 2012-07-12 15:32:36

你可能無法。是否可以生成較高的漸變圖像，並不總是完全顯示（您不會總是看到所有白色的方式），但始終足夠高？隱藏溢出並不難...

來源

2009-09-02 14:09:51

當圖像設置爲背景時，無法對其進行拉伸。

事情可以做：

醜陋的方式：使用IMG標記和伸展它的高度。
好方法：將背景設置爲白色網址（...）不重複，所以漸變之後的所有內容都將以漸變的最後一行的顏色顯示。

來源

2009-09-02 14:11:11 Thinker

使用CSS

來源

2009-09-02 14:12:15

的CSS3 background-size property將允許您指定一個背景圖像的百分比，不能拉伸圖像之間無縫地顯示純色高度，但直到它被廣泛支持，沒有辦法直接做到這一點。

ceejayoz的建議可能是你最好的選擇;如果你使用了一個非常高的漸變效果，那麼效果將不會很明顯（我在我設計的幾個頁面上使用了相同的技術）。

來源

2009-09-02 14:13:08 Donut

今天起作用，至少在Chrome和Firefox上:) – theta 2012-07-02 00:29:53

在不久的將來，您可以使用CSS漸變來做到這一點。這已經在Safari 4工作，並且也將工作在Firefox 3.6。儘管如此，整個事情還是相當實驗性的，細節將隨着CSS3的發展而變化。

對於Opera您可以使用SVG。創建一個文件像這樣（從SVG specification主要採取爲例）：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <g> 
    <defs> 
     <linearGradient id="MyGradient" x1="0" y1="0" x2="0" y2="100%"> 
     <stop offset="0%" stop-color="blue" /> 
     <stop offset="100%" stop-color="white" /> 
     </linearGradient> 
    </defs> 
    <rect fill="url(#MyGradient)" width="100%" height="100%"/> 
    </g> 
</svg>

，然後簡單地使用它作爲背景圖片：

.Content { background: url(gradient.svg); }

對於的Internet Explorer你可以使用一個gradient filter。例如。

.Content { 
    filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorstr='blue', endColorstr='white', gradientType='0'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
     startColorstr='blue', endColorstr='white', gradientType='0')"; 
}

除此之外，對於不支持任何這些瀏覽器，最好的辦法是遵循ceejayoz，Thinker和Donut給出的建議我面前：不（垂直）重複進行梯度圖像並將背景設置爲漸變結束的背景。

來源

2009-09-02 15:03:05 mercator

使用CSS使我的漸變圖像垂直拉伸

回答

相關問題