制作背景图像的渐变

Question

我想一个梯度添加到我的CSS背景图像。我发现了一堆关于对于具有梯度的背景下，具有图像坐在上面的其他职位，但我想图像本身是一个梯度。我尝试这样做：

body { 
margin: 0; 
width: 100%; 
height: 100%; 
font-family: rexlia; 
background-size: cover; 
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url(cubes.jpg) no-repeat; 
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url(cubes.jpg) no-repeat; 

}

所有然而，这是显示未修改的图像。这个snippit实际上来自另一个帖子，显然它工作。虽然不适合我。任何人都可以对此有所了解吗？谢谢。

Answer 1

我想这是这是只有你正在使用，那么你已经省略，使html元件100％高大，以便body也可以是100％高大的代码。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background-size: cover; 
 
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5) 0%, rgba(255, 0, 0, .5) 59%, rgba(0, 0, 255, 0.65) 100%), url(http://lorempixel.com/image_output/technics-q-c-640-480-2.jpg); 
 
}

JSfiddle Demo

Answer 2

如果您删除margin:0;它的工作原理和梯度strippes图像（因为defaut保证金身体开始填充html），或添加html{height:100%;}它的工作原理。

HTML或机构背景mixe如果一起两个标签中

一些测试没有设定，所以你可以看到和理解的行为

body { 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
} 
 
html:hover body { 
 
    margin: 4em; 
 
    /* gradient is repeated and takes margin value as reference to repeat itself in html background */ 
 
}

如果身体有内容或有效高度固定的，它的工作方式相同

body { 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
} 
 
html:hover body { 
 
    margin: 4em; 
 
    /* gradient is repeated body's height and keeps being repetead in html background*/ 
 
    height: 100px;

如果添加HTML，身体{身高：100％;}然后身体有一个有效的高度。

html, body {height:100%;} 
 
body { 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
}

最后，如果你给一个背景值，以HTML，身体会在自身保持自己的背景。

html{background:lime;} 
 
body { 
 
padding:2em; 
 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, 0) 59%, rgba(0, 0, 0, 0.75) 100%), url(http://lorempixel.com/300/200/abstract/10) center no-repeat; 
 
    background-size: cover, cover; 
 
}