it-swarm.com.ru

Используйте CSS градиент над фоновым изображением

Я пытался использовать линейный градиент поверх моего фонового изображения, чтобы получить эффект затухания нижней части моего фона от черного до прозрачного, но, похоже, я не смог его показать.

Я читал другие случаи здесь и примеры, но ни один из них не работает для меня. Я могу видеть только градиент или изображение, но не оба из них. Вот ссылка

Просто нажмите на первый логотип, не обращайте внимания на тот эффект, который я пытаюсь найти в теле всего сайта после этого.

Это мой код CSS:

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}
63
Pam

Хорошо, я решил это, добавив URL для фонового изображения в конце строки.

Вот мой рабочий код:

.css {
  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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;

}
<div class="css"></div>
115
Pam
body {
    margin: 0;
    padding: 0;
    background: url('img/background.jpg') repeat;
}

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: Это только с использованием веб-набора, поэтому он будет работать только в браузерах веб-набора.

пытаться :

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)
11
Ma9ic
#multiple-background{
        box-sizing: border-box;
        width: 123px;
        height: 30px;
        font-size: 12pt;
        border-radius: 7px;             
        background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
        background-repeat: no-repeat, repeat;
        background-position: 5px center, 0px 0px;
    background-size: 18px 18px, 100% 100%;
        color: white;   
        border: 1px solid #e4f6df;
        box-shadow: .25px .25px .5px .5px black;
        padding: 3px 10px 0px 5px;
        text-align: right;
        }
<div id="multiple-background"> Completed </div>
4
Mohammad Faizan

Принятый ответ работает хорошо. Просто для полноты (и так как мне нравится его краткость), я хотел бы поделиться с компасом, как это сделать (SCSS/SASS):

body{
  $colorStart: rgba(0,0,0,0);
  $colorEnd: rgba(0,0,0,0.8);
  @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}
3
Christopher Lörken