동일한 요소에서 배경 이미지와 CSS3 그라디언트를 결합하는 방법

질문 : 동일한 요소에서 배경 이미지와 CSS3 그라디언트를 결합하려면 어떻게해야합니까?

---

background-color CSS3 그라디언트를 사용한 다음 background-image 를 적용하여 일종의 밝고 투명한 텍스처를 적용하려면 어떻게해야합니까?

답변

---

여러 배경!

 

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

이 두 줄은 그래디언트를 수행하지 않는 모든 브라우저를 대체합니다. 아래의 IE <9 만 이미지 스택에 대한 참고 사항을 참조하십시오.

• 라인 1은 평평한 배경색을 설정합니다.
• 라인 2는 배경 이미지 폴백을 설정합니다.

마지막 줄은이를 처리 할 수있는 브라우저의 배경 이미지와 그라디언트를 설정합니다.

• 3 행은 비교적 현대적인 모든 브라우저를위한 것입니다.

거의 모든 현재 브라우저는 여러 배경 이미지와 CSS 배경을 지원합니다. 브라우저 지원은 http://caniuse.com/#feat=css-gradients를 참조하십시오. 여러 브라우저 접두사가 필요하지 않은 이유에 대한 좋은 게시물은 http://codepen.io/thebabydino/full/pjxVWp/를 참조하십시오.

레이어 스택

첫 번째로 정의 된 이미지는 스택의 맨 위에 있습니다. 이 경우 이미지는 그라디언트의 맨 위에 있습니다.

배경 레이어링에 대한 자세한 내용은 http://www.w3.org/TR/css3-background/#layering을 참조하십시오.

이미지 만 스태킹 (선언에 그라디언트 없음) IE <9의 경우

IE9 이상은 이와 같은 방식으로 이미지를 쌓을 수 있습니다. 이것을 사용하여 ie9에 대한 그라디언트 이미지를 만들 수 있지만 개인적으로는 그렇지 않습니다. 그러나 이미지 만 사용할 때주의해야합니다. 즉 <9는 fallback 문을 무시하고 이미지를 표시하지 않습니다. 그래디언트가 포함 된 경우에는 발생하지 않습니다. 이 경우 단일 폴백 이미지를 사용하려면 폴백 코드와 함께 Paul Irish의 멋진 Conditional HTML 요소를 사용하는 것이 좋습니다.

.lte9 #target{ background-image: url("IMAGE_URL"); }

배경 위치, 크기 조정 등

단일 이미지에 적용되는 다른 속성도 쉼표로 구분할 수 있습니다. 하나의 값만 제공하면 그래디언트를 포함한 모든 스택 이미지에 적용됩니다. background-size: 40px; 이미지와 그라디언트를 모두 높이와 너비가 40px로 제한합니다. 그러나 background-size: 40px, cover; 이미지를 40px로 만들고 그라디언트가 요소를 덮을 것입니다. 한 이미지에만 설정을 적용하려면 다른 이미지에 대한 기본값을 설정하십시오. background-position: 50%, 0 0; 또는이 를 지원하는 브라우저의 경우 initial : background-position: 50%, initial;

배경 속기를 사용할 수도 있지만 이렇게하면 대체 색상과 이미지가 제거됩니다.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

배경 위치, 배경 반복 등에 동일하게 적용됩니다.

출처 : https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element