Arka plan resmi üzerinde css gradyanı kullan

Question

Arka plan resmimin üstünde, arka planımın alt kısmında siyahtan saydam bir efekt elde etmek için doğrusal bir degrade kullanmaya çalışıyorum ama görünmemek mümkün görünmüyor göstermek için.

Diğer örnekleri burada ve örnekler okudum ama hiçbiri benim için çalışmıyor. Sadece eğimi veya resmi görebilirim, ancak ikisini de değil. link

Sadece ilk logoya tıklayın, bu etkiyi göz ardı edin, denediğim şey, bundan sonra sitenin tamamındadır.

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

Answer 1

Tamam, çizgi sonunda arka plan görüntüsü için url ekleyerek çözdü. Kabul cevabı iyi çalışıyor

.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('http://www.skrenta.com/images/stackoverflow.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('http://www.skrenta.com/images/stackoverflow.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('http://www.skrenta.com/images/stackoverflow.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('http://www.skrenta.com/images/stackoverflow.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('http://www.skrenta.com/images/stackoverflow.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('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat; 
 
    height: 200px; 
 

 
}

<div class="css"></div>

Answer 2

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

LÜTFEN DİKKAT: Bu yalnızca kullanılarak webkit sadece webkit tarayıcılarda çalışır böylece

Bu benim css kodudur.

deneyin:

-moz-linear-gradient = (Firefox) 
-ms-linear-gradient = (IE) 
-o-linear-gradient = (Opera) 
-webkit-linear-gradient = (Chrome & safari) 

Answer 3

:

İşte benim çalışma kod. Sadece (Sevdiğim beri ve darlığı var) şeyiyle ben (SCSS/SUKDÖ'nün) pusula ile kendisine nasıl paylaşmak istedim:

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

Answer 4

#multiple-background{ 
 
\t box-sizing: border-box; 
 
\t width: 123px; 
 
\t height: 30px; 
 
\t font-size: 12pt; 
 
\t border-radius: 7px; \t \t 
 
\t background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425); 
 
\t background-repeat: no-repeat, repeat; 
 
\t background-position: 5px center, 0px 0px; 
 
    background-size: 18px 18px, 100% 100%; 
 
\t color: white; \t 
 
\t border: 1px solid #e4f6df; 
 
\t box-shadow: .25px .25px .5px .5px black; 
 
\t padding: 3px 10px 0px 5px; 
 
\t text-align: right; 
 
\t }

<div id="multiple-background"> Completed </div>