Lớp màu bán trong suốt trên ảnh nền?

Tôi có một DIV và tôi muốn đặt một mô hình làm nền. Mẫu này có màu xám. Vì vậy, để làm cho nó đẹp hơn một chút, tôi muốn đặt một "lớp" màu trong suốt nhẹ hơn. Dưới đây là những gì tôi đã cố gắng nhưng không hiệu quả. Có cách nào để đặt lớp màu trên hình nền không?

Đây là CSS của tôi:

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

Đây là:

.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 cho việc này:

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

Tất nhiên bạn cần xác định chiều rộng và chiều cao cho .backgroundlớp, nếu không có phần tử nào khác bên trong nó

Tôi biết đây là một chủ đề thực sự cũ, nhưng nó xuất hiện ở đầu Google, vì vậy đây là một lựa chọn khác.

Đây là CSS thuần túy và không yêu cầu thêm HTML.

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

Có một số lượng sử dụng đáng ngạc nhiên cho tính năng bóng hộp.

Từ CSS-Tricks ... có một cách để thực hiện việc này mà không cần lập chỉ mục z và thêm các phần tử giả - yêu cầu độ dốc tuyến tính mà tôi nghĩ có nghĩa là bạn cần hỗ trợ 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);
}

Bạn cũng có thể sử dụng gradient tuyến tính và hình ảnh: 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');
}

Điều này là do chức năng gradient tuyến tính tạo ra một Hình ảnh được thêm vào ngăn xếp nền. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Sau đó, bạn cần một phần tử bao bọc với hình ảnh bg và trong đó phần tử nội dung có màu bg:

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

và 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%;
}

Thử cái này. Làm việc cho tôi.

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

Tôi đã sử dụng điều này như một cách để áp dụng cả sắc độ màu cũng như độ dốc cho hình ảnh để làm cho văn bản lớp phủ động dễ dàng hơn để tạo kiểu cho mức độ dễ đọc khi bạn không thể kiểm soát cấu hình màu của hình ảnh. Bạn không phải lo lắng về chỉ số 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);
  }

Hy vọng nó giúp

Xem câu trả lời của tôi tại https://stackoverflow.com/a/18471979/193494 để biết tổng quan toàn diện về các giải pháp có thể:

1. sử dụng nhiều nền với độ dốc tuyến tính,
2. nhiều nền với PNG được tạo hoặc
3. kiểu dáng an: sau giả hành để hoạt động như một lớp nền thứ cấp.

Sao lại phức tạp thế? Giải pháp của bạn gần như đúng, ngoại trừ cách dễ dàng hơn để làm cho mẫu trong suốt và màu nền vững chắc . PNG có thể chứa trong suốt. Vì vậy, sử dụng photoshop để làm cho mẫu trong suốt bằng cách đặt lớp thành 70% và lưu lại hình ảnh của bạn. Sau đó, bạn chỉ cần một bộ chọn. Hoạt động trên trình duyệt chéo.

CSS:

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

HTML:

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

Đây là cơ bản. Một ví dụ sử dụng sau khi tôi chuyển từ backgroundtới background-imagenhưng cả hai tính chất hoạt động giống.

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> 

XIN VUI LÒNG MỘT PHÚT! NÓ KẾT THÚC MỘT SỐ THỜI GIAN ĐỂ KIẾM ĐƯỢC MẪU BÊN NGOÀI.

Trang web này có vẻ khá chậm ...

Bạn có thể sử dụng pixel bán trong suốt mà bạn có thể tạo ví dụ ở đây , ngay cả trong cơ sở64 Dưới đây là một ví dụ với 50% màu trắng:

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

• không cần tải lên

• không có thêm html

• tôi đoán việc tải phải nhanh hơn bóng hộp hoặc gradient tuyến tính

Đây là một mẹo đơn giản hơn chỉ với 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>

Một cái khác có SVG là hình ảnh lớp phủ nội tuyến (lưu ý: nếu bạn sử dụng #bên trong mã svg, bạn phải 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;

Tôi chỉ đơn giản sử dụng thuộc tính css hình ảnh nền trên div nền đích.
Lưu ý hình ảnh nền chỉ chấp nhận các chức năng màu gradient.
Vì vậy, tôi đã sử dụng gradient tuyến tính thêm hai màu tương tự mong muốn hai lần (sử dụng giá trị rgba cuối cùng để kiểm soát độ mờ màu).

Ngoài ra, tìm thấy hai tài nguyên hữu ích này để:

1. Thêm văn bản (hoặc div với bất kỳ nội dung nào khác) trên hình nền: Hình ảnh anh hùng
2. Chỉ làm mờ hình nền, mà không làm mờ div trên đầu: Hình nền mờ

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

Bạn cũng có thể thêm độ mờ cho màu lớp phủ của bạn.

Thay vì làm

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

Bạn có thể làm:

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

Sau đó, tạo một phong cách mới cho màu mờ đục:

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

Thay đổi độ mờ thành bất kỳ số nào bạn muốn bên dưới 1. Sau đó, bạn tạo kiểu màu này cùng kích thước với hình ảnh của bạn. Nó nên hoạt động.