เลเยอร์สีกึ่งโปร่งใสเหนือภาพพื้นหลัง?

ฉันมี 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. ใส่สไตล์: หลัง pseudoelement เพื่อทำหน้าที่เป็นเลเยอร์พื้นหลังสำรอง

ทำไมจึงซับซ้อน โซลูชันของคุณเกือบจะถูกต้องแล้วยกเว้นวิธีที่จะทำให้รูปแบบโปร่งใสและสีพื้นหลังเป็นไปได้ง่ายขึ้น 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;

ฉันเพียงแค่ใช้คุณสมบัติ css ภาพพื้นหลังใน div พื้นหลังเป้าหมาย
หมายเหตุภาพพื้นหลังยอมรับเฉพาะฟังก์ชันสีไล่ระดับสีเท่านั้น
ดังนั้นฉันจึงใช้การไล่ระดับสีเชิงเส้นเพิ่มสีซ้อนทับที่ต้องการเหมือนกันสองครั้ง (ใช้ค่า rgba ล่าสุดเพื่อควบคุมความทึบของสี)

และพบทรัพยากรที่มีประโยชน์ทั้งสองนี้เพื่อ:

1. เพิ่มข้อความ (หรือ div ด้วยเนื้อหาอื่น ๆ ) เหนือภาพพื้นหลัง: Image Hero
2. ภาพพื้นหลังเบลอเท่านั้นโดยไม่ทำให้เบลอของภาพอยู่ด้านบน: ภาพพื้นหลังเบลอ

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 จากนั้นคุณกำหนดสไตล์สีนี้ให้มีขนาดเดียวกับภาพของคุณ มันควรจะทำงาน