Question

我需要一些帮助。

这就是我现在所得到的： 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
}

Answer 1

你无法伸展它。但是，您可以将其background-repeat更改为repeat-x，并将背景颜色设置为等于图像底部的颜色。这将仅垂直显示一次渐变，然后显示两种

之间没有接缝的纯色

Answer 2

CSS3 background-size property将允许您指定背景图像高度的百分比，但在广泛支持之前，无法直接执行此操作。

ceejayoz的建议可能是你最好的选择;如果你使用一个非常高的渐变效果将不会那么明显（我在我设计的几个页面上使用了相同的技术）。

Answer 3

在不久的将来，您可以使用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。 E.g。

.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给出的建议：不要't（垂直）重复渐变图像并将背景设置为渐变结束的背景。

Answer 4

你可能不能。是否可以选择生成更高的渐变图像，并不总是完全显示（您不会总是看到白色），但总是足够高？隐藏溢出并不太难......

Answer 5

当图像设置为背景时，你无法拉伸它。

你可以做的事情：

丑陋的方式：使用IMG标签并拉伸它的高度。
好方法：将背景设置为白色网址（...）不重复，因此渐变后的所有内容都会以渐变的最后一行的颜色显示。

Answer 6

您无法使用CSS拉伸图像

使用CSS使我的渐变图像垂直伸展

6 个答案: