使用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使我的渐变图像垂直拉伸

回答

相关问题