Fatal编程技术网
  • css/
  • 使用CSS使渐变图像垂直拉伸

使用CSS使渐变图像垂直拉伸

css layout

使用CSS使渐变图像垂直拉伸,css,layout,Css,Layout,我需要一些帮助 我现在得到的是： 我需要使用CSS垂直拉伸渐变 下面是我的CSS+HTML的代码 <html> <head> <title>Test Site 1 - Color Palettes and Scheme Test</title> <link rel="stylesheet" href="TestSiteCSS.css" type="text/css"> <

我需要一些帮助

我现在得到的是：

我需要使用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>
你可能不能。这是一个选项，以产生一个更高的梯度图像，将不会总是完全显示（你不会总是看到所有的方式，白色），但将始终足够高？隐藏溢出并不难…

当图像设置为背景时，您无法拉伸溢出

你可以做的事情：

  • 丑陋的方式：使用IMG标签并将其拉伸至高度

  • 好方法：将背景设置为白色url（…）不重复，所以渐变后的所有内容都将使用渐变最后一行的颜色

    • 你不能伸展它。不过，您可以将其
    背景重复
    更改为
    repeat-x
    ，并将背景颜色设置为图像底部的颜色。这将在垂直方向上只显示一次渐变，然后在两个渐变之间显示一个没有接缝的纯色。您无法使用CSS拉伸图像。这将允许您指定背景图像高度的百分比，但在它得到广泛支持之前，无法直接执行此操作

    切杰约兹的建议可能是你最好的选择；如果你使用非常高的渐变效果就不会那么明显了（我已经在我设计的几个页面上使用了相同的技术）。

    在不久的将来，你可以使用CSS渐变来做到这一点。这已经在中起作用，也将在中起作用。尽管如此，整个过程仍处于实验阶段，随着CSS3的发展，细节可能会发生变化

    对于Opera您可以使用SVG。创建这样的文件（示例主要取自）：

    对于Internet Explorer，您可以使用。例如

    除此之外，对于不支持上述任何一种的浏览器，您最好的选择是遵循我之前给出的建议：不要（垂直）重复渐变图像，并将背景设置为渐变结尾的背景。

    为什么不在doctype（）中问这个问题？两年过去了，这个答案仍然帮助了我！似乎是最好的解决方案，直到渐变在CSS中得到广泛支持。我忘了只强制重复到repeat-x。现在工作完美了！现在可以使用，至少在Chrome和Firefox上可以：） 
    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
}

    <?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); }

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