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

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

---

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

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

---

See my answer at https://stackoverflow.com/a/18471979/193494 for a comprehensive overview of possible solutions:

1. using multiple backgrounds with a linear gradient,
2. multiple backgrounds with a generated PNG, or
3. styling an :after pseudoelement to act as a secondary background layer.

---

Why so complicated? Your solution was almost right except it's a way easier to make the pattern transparent and the background color solid. PNG can contain transparencies. So use photoshop to make the pattern transparent by setting the layer to 70% and resaving your image. Then you only need one selector. Works cross browser.

CSS:

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

HTML:

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

This are the basic. A usage example follows where I switched from background to background-image but both properties works the same.

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> 

PLEASE WAIT A MINUTE! IT TAKES SOME TIME TO LOAD THE EXTERNAL PATTERNS.

This website seems to be rather slow...

---

You can use a semitransparent pixel, which you can generate for example here, even in base64 Here is an example with white 50%:

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

• without uploading

• without extra html

• i guess the loading should be quicker than box-shadow or linear gradient

---

Here is a more simple trick with only 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>

참고URL : https://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image