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

Question

使用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>

Run Code Online (Sandbox Code Playgroud)

/ 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
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

cee*_*yoz 11

你无法伸展它.但是,您可以做的是将其更改background-repeat为repeat-x并将背景颜色设置为等于图像底部的颜色.这将仅在垂直方向上显示一次渐变,然后显示纯色,两者之间没有接缝

归档时间：	16 年，2 月前
查看次数：	9411 次
最近记录：	16 年，2 月前