Arka plan görüntüsü üzerinde yarı saydam renk katmanı?

Bir DIV var ve arka plan olarak bir desen koymak istiyorum. Bu desen gridir. Bu yüzden biraz daha güzel yapmak için, üzerine açık şeffaf bir renk "katmanı" koymak istiyorum. Aşağıda denedim ama işe yaramadı. Renkli katmanı arka plan resminin üzerine koymanın bir yolu var mı?

İşte benim CSS:

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

İşte burada:

.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%;
}

Bunun için HTML:

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

İçinde .backgroundbaşka bir öğe yoksa, elbette sınıfa bir genişlik ve yükseklik tanımlamanız gerekir

Bunun gerçekten eski bir konu olduğunu biliyorum, ancak Google'da en üstte görünüyor, bu yüzden başka bir seçenek var.

Bu, saf CSS'dir ve fazladan HTML gerektirmez.

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

Kutu-gölge özelliği için şaşırtıcı sayıda kullanım vardır.

CSS-Tricks'ten ... bunu z-endeksleme ve sahte öğeler eklemeden yapmanın tek adımlı bir yolu var - bence CSS3 desteğine ihtiyacınız olduğu anlamına gelen doğrusal degrade gerekiyor

.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);
}

Ayrıca doğrusal bir degrade ve bir resim de kullanabilirsiniz: 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');
}

Bunun nedeni, doğrusal gradyan işlevinin arka plan yığınına eklenen bir Görüntü oluşturmasıdır. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Daha sonra bg görüntüsüyle bir sarma öğesine ve içinde bg rengiyle içerik öğesine ihtiyacınız vardır:

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

ve 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%;
}

Bunu dene. Benim için çalışıyor.

.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;
}

Bunu, görüntü renk profillerini kontrol edemediğinizde dinamik bindirme metninin okunaklı olmasını kolaylaştırmak için görüntülere renk tonlarının yanı sıra degradeleri uygulamanın bir yolu olarak kullandım. Z-endeksi konusunda endişelenmenize gerek yok.

HTML

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

SUKDÖ'nün

.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);
  }

Umarım yardımcı olur

Benim cevap bakınız https://stackoverflow.com/a/18471979/193494 olası çözümleri kapsamlı bir bakış için:

1. doğrusal bir gradyanla birden fazla arka plan kullanma,
2. oluşturulan bir PNG ile birden fazla arka plan veya
3. an: ikincil bir arka plan katmanı olarak işlev görmesi için sözde öğeden sonra.

Neden bu kadar karmaşık? Deseni şeffaf ve arka plan rengini sağlam hale getirmenin daha kolay olması dışında çözümünüz neredeyse haklıydı . PNG asetat içerebilir. Bu nedenle, katmanı% 70'e ayarlayıp görüntünüzü kaydederek deseni şeffaf hale getirmek için photoshop'u kullanın. O zaman sadece bir seçiciye ihtiyacınız var. Çapraz tarayıcı çalışır.

CSS:

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

HTML:

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

Bu temel. İ açık burada bir kullanım, örneğin, aşağıdaki backgroundiçin background-imageancak her iki özellikler aynı şekilde çalışır.

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> 

LÜTFEN BİR DAKİKA BEKLEYİNİZ! HARİCİ KALIPLARI YÜKLEMEK BAZI ZAMAN GEREKİR.

Bu web sitesi oldukça yavaş görünüyor ...

Burada , örneğin base64'de bile oluşturabileceğiniz yarı saydam bir piksel kullanabilirsiniz64 İşte% 50 beyaza sahip bir örnek:

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

• yüklemeden

• ekstra html olmadan

• Yüklemenin kutu-gölge veya doğrusal gradyandan daha hızlı olması gerektiğini düşünüyorum

İşte sadece css ile daha basit bir hile.

<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>

Satır içi yer paylaşımı görüntüsü olarak SVG'ye sahip başka bir tane (not: #svg kodunun içinde kullanıyorsanız bunu urlencode etmeniz gerekir!):

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;

Ben sadece hedef arka plan div arka plan görüntü css özelliğini kullandım .
Not arka plan resmi yalnızca degrade renk işlevlerini kabul eder.
Bu yüzden aynı istenen kaplama rengini iki kez ekleyerek doğrusal gradyanı kullandım (renk opaklığını kontrol etmek için son rgba değerini kullanın).

Ayrıca, bu iki yararlı kaynağı şunlar için buldu:

1. Arka plan resminin üzerine metin ekleyin (veya başka bir içerikle div): Hero Image
2. Div üstünü bulanıklaştırmadan yalnızca arka plan görüntüsünü bulanıklaştırın: Bulanık Arka Plan Görüntüsü

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%);
}

Ayrıca kaplama renginize opaklık da ekleyebilirsiniz.

Yapmak yerine

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

Yapabilirsin:

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

Ardından opaklık rengi için yeni bir stil oluşturun:

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

Opaklığı aşağıda istediğiniz sayıya çevirin. 1. Bu renk stilini görüntünüzle aynı boyuta getirin. İşe yaramalı.