배경 이미지 위에 CSS 그라데이션 사용

배경 이미지 위에 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)));
}

---

좋아, 줄 끝에 배경 이미지 에 대한 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>

---

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)

---

#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>

---

The accepted answer works well. Just for completeness (and since I like it's shortness), I wanted to share how to to it with compass (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"));
}

참고URL : https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image