Có thể đặt độ mờ của ảnh nền mà không ảnh hưởng đến độ mờ của các phần tử con không?

Thí dụ

Tất cả các liên kết trong phần chân trang cần một viên đạn tùy chỉnh (ảnh nền) và độ mờ đục của viên đạn tùy chỉnh phải là 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Những gì tôi đã thử

Tôi đã thử đặt độ mờ của các mục danh sách thành 50%, nhưng sau đó độ mờ của văn bản liên kết cũng là 50% - và dường như không có cách nào để đặt lại độ mờ của các phần tử con:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

Tôi cũng đã thử sử dụng rgba, nhưng điều đó không có bất kỳ ảnh hưởng nào đến hình nền:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Bạn có thể sử dụng CSS linear-gradient()với rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Đưa hình ảnh của bạn vào trình chỉnh sửa hình ảnh, giảm độ mờ, lưu nó dưới dạng .png và sử dụng thay thế.

Điều này sẽ làm việc với mọi trình duyệt

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Nếu bạn không muốn sự minh bạch ảnh hưởng đến toàn bộ container và con của nó, hãy kiểm tra cách giải quyết này. Bạn phải có một đứa trẻ có vị trí tuyệt đối với cha mẹ tương đối có vị trí.

Kiểm tra bản demo tại http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Nếu bạn đang sử dụng hình ảnh như một viên đạn, bạn có thể xem xét: trước phần tử giả.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Bạn có thể đặt hình ảnh vào div: after hoặc div: before và đặt độ mờ cho "div ảo" đó

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

tìm thấy ở đây http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Hack với độ mờ .99 (dưới 1) tạo bối cảnh chỉ mục z để bạn không thể lo lắng về các giá trị chỉ mục z toàn cầu. (Hãy thử xóa nó và xem điều gì xảy ra trong bản demo tiếp theo nơi trình bao bọc cha mẹ có chỉ số z dương.)
Nếu phần tử của bạn đã có chỉ mục z, thì bạn không cần hack này.

Bản demo của kỹ thuật này .

Thật không may, tại thời điểm viết câu trả lời này, không có cách nào trực tiếp để làm điều này. Bạn cần phải:

1. sử dụng hình ảnh bán trong suốt cho nền (dễ dàng hơn nhiều).
2. thêm một yếu tố phụ (như div) bên cạnh trẻ em mà bạn muốn mờ đục, thêm nền cho nó và sau khi làm cho nó trong suốt, đặt nó phía sau trẻ em được đề cập.

Một tùy chọn khác là cách tiếp cận Thủ thuật CSS trong việc chèn một phần tử giả kích thước chính xác của phần tử gốc ngay phía sau nó để làm giả hiệu ứng nền mờ mà chúng ta đang tìm kiếm. Đôi khi bạn sẽ cần đặt chiều cao cho phần tử giả.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Thuộc tính "bộ lọc", cần một số nguyên cho tỷ lệ phần trăm thay vì gấp đôi, để hoạt động cho IE7 / 8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS: Tôi đăng bài này như một câu trả lời, vì SO, cần ít nhất 6 ký tự thay đổi để chỉnh sửa.

Để thực sự tinh chỉnh mọi thứ, tôi khuyên bạn nên đặt các lựa chọn phù hợp trong trình bao bọc nhắm mục tiêu trình duyệt. Đây là điều duy nhất hiệu quả với tôi khi tôi không thể khiến IE7 và IE8 "chơi đẹp với người khác" (vì tôi hiện đang làm việc cho một công ty phần mềm tiếp tục hỗ trợ họ).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Tôi có thể có các khoản dự phòng trong đoạn mã trên - nếu bất cứ ai muốn làm sạch nó hơn nữa, hãy thoải mái!

Nếu bạn phải đặt độ mờ chỉ cho dấu đầu dòng, tại sao bạn không đặt kênh alpha trực tiếp vào hình ảnh? Bằng cách này, tôi không nghĩ rằng có một cách để đặt độ mờ thành hình nền thông qua css mà không thay đổi độ mờ của toàn bộ thành phần (và cả con của nó nữa).

Chỉ cần thêm vào ở trên..bạn có thể sử dụng kênh alpha với các thuộc tính màu mới, vd. rgba (0,0,0,0) ok vì vậy đây là màu đen nhưng với độ mờ bằng 0 nên với tư cách là cha mẹ, nó sẽ không ảnh hưởng đến đứa trẻ. Điều này chỉ hoạt động trên Chrome, FF, Safari và .... Tôi mỏng O.

chuyển đổi màu hex của bạn sang RGBA

Tôi tìm thấy một hướng dẫn khá tốt và đơn giản về vấn đề này. Tôi nghĩ rằng nó hoạt động rất tốt (và mặc dù nó hỗ trợ IE, tôi chỉ nói với khách hàng của mình sử dụng các trình duyệt khác):

Độ trong suốt của nền CSS mà không ảnh hưởng đến các phần tử con, thông qua RGBa và các bộ lọc

Từ đó bạn có thể thêm hỗ trợ gradient, v.v.

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Bạn có thể thử mã này. Tôi nghĩ rằng nó sẽ được làm việc. Bạn có thể truy cập bản demo