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

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

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

가능한 솔루션에 대한 포괄적 인 개요는 https://stackoverflow.com/a/18471979/193494 에서 내 대답을 참조하십시오 .

1. 선형 그라디언트로 여러 배경 사용
2. PNG가 생성 된 여러 배경 또는
3. : after 유사 요소의 스타일을 지정하여 보조 배경 레이어로 작동합니다.

왜 그렇게 복잡한가? 패턴을 투명하게 만들고 배경색을 단색 으로 만드는 방법을 제외하고는 솔루션이 거의 옳았습니다 . PNG는 투명 필름을 포함 할 수 있습니다. 따라서 Photoshop을 사용하여 레이어를 70 %로 설정하고 이미지를 다시 저장하여 패턴을 투명하게 만드십시오. 그런 다음 하나의 선택기가 필요합니다. 크로스 브라우저에서 작동합니다.

CSS :

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML :

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

이것이 기본입니다. 내가로 전환 어디에 사용 예는 다음 background에 background-image하지만 두 속성은 동일하게 작동합니다.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

조금만 기다려주세요! 외부 패턴을로드하는 데 약간의 시간이 걸립니다.

이 웹 사이트는 다소 느린 것 같습니다 ...

반투명 픽셀을 사용할 수 있습니다 . base64에서도 여기 에서 생성 할 수 있습니다. 흰색이 50 % 인 예는 다음과 같습니다.

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• 업로드하지 않고

• 여분의 HTML없이

• 상자 그림자 또는 선형 그라디언트보다 로딩이 더 빠를 것 같아요

CSS 만있는 더 간단한 트릭이 있습니다.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

SVG를 인라인 오버레이 이미지로 사용하는 다른 하나 (참고 : #svg 코드 내부에서 사용하는 경우 urlencode해야합니다!) :

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

대상 배경 div에서 단순히 배경 이미지 CSS 속성을 사용했습니다.
배경 이미지는 그라디언트 색상 기능 만 허용합니다.
그래서 원하는 그라데이션 색상을 두 번 추가하는 선형 그라디언트를 사용했습니다 (마지막 rgba 값을 사용하여 색상 불투명도 제어).

또한 다음 두 가지 유용한 리소스를 발견했습니다.

1. 배경 이미지 위에 텍스트 (또는 다른 내용으로 div) 추가 : Hero Image
2. 상단의 div를 흐리게하지 않고 배경 이미지 만 흐리게 : 흐린 배경 이미지

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

오버레이 색상에 불투명도를 추가 할 수도 있습니다.

대신에

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

넌 할 수있어:

background: url('../img/bg/diagonalnoise.png');

그런 다음 불투명도 색상에 대한 새 스타일을 만듭니다.

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

불투명도를 원하는 숫자 아래 1로 변경하십시오. 그런 다음이 색상 스타일을 이미지와 동일한 크기로 만드십시오. 작동해야합니다.