[css] 동일한 요소에서 배경 이미지와 CSS3 그라디언트를 어떻게 결합합니까?

Program / 글쓴이

내 CSS3 그라디언트를 사용 background-color하고 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는 대체 문을 무시하고 이미지를 표시하지 않습니다. 그라디언트가 포함 된 경우에는 발생하지 않습니다. 이 경우 단일 폴백 이미지를 사용하려면 폴 아일랜드 코드의 멋진 조건부 HTML 요소 를 폴백 코드와 함께 사용하는 것이 좋습니다 .

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

배경 위치, 크기 등

단일 이미지에 적용되는 다른 속성도 쉼표로 구분 될 수 있습니다. 1 개의 값만 제공하면 그라디언트를 포함한 모든 스택 이미지에 적용됩니다. 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);
}

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

답변

이미지의 배경 위치 를 설정 하려면 다음을 사용할 수 있습니다.

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

또는 LESS 믹스 인 (부트 스트랩 스타일)을 만들 수도 있습니다.

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

답변

알아야 할 한 가지는 첫 번째로 정의 된 배경 이미지가 스택에서 최상위라는 것입니다. 마지막으로 정의 된 이미지가 가장 아래에 나타납니다. 즉, 이미지 뒤에 배경 그라데이션을 사용하려면 다음이 필요합니다.

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

스 니펫 확장

이미지의 배경 위치와 배경 크기를 정의 할 수도 있습니다. CSS3 그라디언트로 할 수있는 몇 가지 흥미로운 작업에 대한 블로그 게시물을 작성했습니다

답변

당신은 단순히 입력 할 수 있습니다 :

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

스 니펫 확장

답변

나는 항상 다음 코드를 사용하여 작동시킵니다. 몇 가지 메모가 있습니다.

  1. 그래디언트 앞에 이미지 URL을 배치하면이 이미지가 예상대로 그래디언트 위에 표시됩니다 .
.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

스 니펫 확장
  1. 이미지 URL 앞에 그라디언트를 배치하면이 이미지가 그라디언트 아래 에 표시됩니다 .
.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

스 니펫 확장

이 기술은 여기에 설명 된대로 여러 배경 이미지가있는 것과 동일 합니다.

답변

내 해결책 :

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

답변

나는이 기술을 한 단계 더 발전시켜야하는 작업을 수행했으며 내 작업을 간략하게 설명하고 싶었습니다. 아래 코드는 동일한 작업을 수행하지만 SASS, Bourbon 및 이미지 스프라이트를 사용합니다.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);
    }
    a.button-2{
       @include sprite (0 -40px);
    }

SASS와 Bourbon은 크로스 브라우저 코드를 처리하며 이제 버튼 당 스프라이트 위치 만 선언하면됩니다. 버튼 활성화 및 호버 상태에 대해이 주체를 쉽게 확장 할 수 있습니다.