Создание фонового изображения градиент

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; 

}

Все это делает, однако, отобразить неизмененной изображение. Этот снипп действительно происходил из другого поста, в котором, по-видимому, он работал. Не для меня, хотя. Может ли кто-нибудь пролить свет на это? Благодарю.

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 изображения (из-за этого маржинальной УСПЕШНОЕ тело начинает заполнять html), или добавить html{height:100%;} он работает.

HTML или тело фон михе вместе, если не установлен в обоих тегах

некоторые тест, так что вы можете увидеть и понять поведение

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