[css] 배경 이미지 위에 반투명 색상 레이어?

Program / 글쓴이

나는 DIV를 가지고 있으며 배경으로 패턴을 넣고 싶습니다. 이 패턴은 회색입니다. 좀 더 멋지게 만들기 위해, 나는 “투명한”투명 컬러를 겹쳐 놓고 싶습니다. 아래는 내가 시도했지만 작동하지 않는 것입니다. 배경 이미지 위에 컬러 레이어를 넣는 방법이 있습니까?

내 CSS는 다음과 같습니다.

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

답변

여기있어:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

이를위한 HTML :

<div class="background">
    <div class="layer">
    </div>
</div>

물론 .background그 안에 다른 요소가 없다면 클래스 의 너비와 높이를 정의해야 합니다.

답변

나는 이것이 실제로 오래된 스레드라는 것을 알고 있지만 Google 상단에 표시되므로 다른 옵션이 있습니다.

이것은 순수한 CSS이며 추가 HTML이 필요하지 않습니다.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

상자 그림자 기능에는 놀라운 용도가 있습니다.

답변

CSS-Tricks에서 … z 인덱싱 및 의사 요소 추가 없이이 작업을 수행하는 한 단계 방법이 있습니다-CSS3 지원이 필요하다는 선형 그라데이션이 필요합니다.

.tinted-image {
  background-image:
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

답변

선형 그라디언트 및 이미지를 사용할 수도 있습니다.
http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

선형 그라디언트 기능이 배경 스택에 추가 된 이미지를 생성하기 때문입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

답변

그런 다음 bg 이미지가 포함 된 줄 바꿈 요소와 bg 색상이 포함 된 내용 요소가 필요합니다.

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

그리고 CSS :

#Wrapper{
    background:url(../img/bg/diagonalnoise.png);
    width:300px;
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7);
    width:100%;
    height:100%;
}

답변

이 시도. 나를 위해 작동합니다.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

답변

이미지 색상 프로파일을 제어 할 수 없을 때 동적 오버레이 텍스트의 스타일을 쉽게 파악할 수 있도록 이미지에 색상 색조와 그라디언트를 모두 적용하는 방법으로이 방법을 사용했습니다. z- 인덱스에 대해 걱정할 필요가 없습니다.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

그것이 도움이되기를 바랍니다.