css - 如何分别为多个背景图像赋予不透明度

Question

我正在使用 Extjs 并想像下面那样应用 css(不透明度)但是它不起作用请帮助我

  .class{
    background-image:url(../images/marion.png),url(../images/dots1.png),url(../images/dots2.png),url(../images/neur        al.png);
    background-repeat: no-repeat,repeat-x,repeat-x,no-repeat;
    background-position: center 22px,right center,right center,0 0 ; 
    background-size :42% 9%,20% 15%,20% 12%,100% 100% ;
    opacity:0.3,0.2,0.2,0.8; /* this is not working */
}

Answer 1

您的答案是 CSS 无法做到这一点。不过，既然你要了一个例子，我就给你。

我再次高度怀疑这对你来说是否值得，但如果你知道所有背景图像的像素坐标以及背景图像背后的背景，你可以编写一个非常长的 box-shadow 属性，它本质上是绘制 block 在您需要创建不透明幻觉的区域上添加彩色像素。

演示:http://jsbin.com/nofowo/4/edit?css,output

您可以删除 figure::before { } block 以查看应用不透明效果的位置。

figure {
    width: 400px;
    height: 440px;

    background-image: 
      url('http://40.media.tumblr.com/9156a139784c4fde141fc379c7b5973d/tumblr_ngasc7M0dA1qhhnbao1_1280.jpg'),
      url('http://36.media.tumblr.com/c1d431544107b313e5b2406b10387ccc/tumblr_ng6erxjLOp1qhhnbao1_1280.jpg'),
      url('http://36.media.tumblr.com/f375f4052fff1849aa754a8df2d320a7/tumblr_nfzmz0Ckfe1qhhnbao1_1280.jpg'),
      url('http://40.media.tumblr.com/801f19fea89afccb5f45d481a9399afa/tumblr_nfxteea7ss1qhhnbao1_1280.jpg');
    background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
    background-position: center 22px, right center, right center, 0 0; 
    background-size: 42% 9%, 20% 15%, 20% 12%, 100% 100%;
}

figure::before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: -49px;
    left: 44px;

    box-shadow: 
      70px 70px rgba(15,69,63,0.6),
      80px 70px rgba(15,69,63,0.6),
      90px 70px rgba(15,69,63,0.6),
      100px 70px rgba(15,69,63,0.6),
      110px 70px rgba(15,69,63,0.6),
      120px 70px rgba(15,69,63,0.6),
      130px 70px rgba(15,69,63,0.6),
      140px 70px rgba(15,69,63,0.6),
      150px 70px rgba(15,69,63,0.6),
      160px 70px rgba(15,69,63,0.6),
      170px 70px rgba(15,69,63,0.6),
      180px 70px rgba(15,69,63,0.6),
      190px 70px rgba(15,69,63,0.6),
      200px 70px rgba(15,69,63,0.6),
      210px 70px rgba(15,69,63,0.6),
      220px 70px rgba(15,69,63,0.6),
      230px 70px rgba(15,69,63,0.6),
      70px 80px rgba(15,69,63,0.6),
      80px 80px rgba(15,69,63,0.6),
      90px 80px rgba(15,69,63,0.6),
      100px 80px rgba(15,69,63,0.6),
      110px 80px rgba(15,69,63,0.6),
      120px 80px rgba(15,69,63,0.6),
      130px 80px rgba(15,69,63,0.6),
      140px 80px rgba(15,69,63,0.6),
      150px 80px rgba(15,69,63,0.6),
      160px 80px rgba(15,69,63,0.6),
      170px 80px rgba(15,69,63,0.6),
      180px 80px rgba(15,69,63,0.6),
      190px 80px rgba(15,69,63,0.6),
      200px 80px rgba(15,69,63,0.6),
      210px 80px rgba(15,69,63,0.6),
      220px 80px rgba(15,69,63,0.6),
      230px 80px rgba(15,69,63,0.6),
      70px 90px rgba(15,69,63,0.6),
      80px 90px rgba(15,69,63,0.6),
      90px 90px rgba(15,69,63,0.6),
      100px 90px rgba(15,69,63,0.6),
      110px 90px rgba(15,69,63,0.6),
      120px 90px rgba(15,69,63,0.6),
      130px 90px rgba(15,69,63,0.6),
      140px 90px rgba(15,69,63,0.6),
      150px 90px rgba(15,69,63,0.6),
      160px 90px rgba(15,69,63,0.6),
      170px 90px rgba(15,69,63,0.6),
      180px 90px rgba(15,69,63,0.6),
      190px 90px rgba(15,69,63,0.6),
      200px 90px rgba(15,69,63,0.6),
      210px 90px rgba(15,69,63,0.6),
      220px 90px rgba(15,69,63,0.6),
      230px 90px rgba(15,69,63,0.6),
      70px 100px rgba(15,69,63,0.6),
      80px 100px rgba(15,69,63,0.6),
      90px 100px rgba(15,69,63,0.6),
      100px 100px rgba(15,69,63,0.6),
      110px 100px rgba(15,69,63,0.6),
      120px 100px rgba(15,69,63,0.6),
      130px 100px rgba(15,69,63,0.6),
      140px 100px rgba(15,69,63,0.6),
      150px 100px rgba(15,69,63,0.6),
      160px 100px rgba(15,69,63,0.6),
      170px 100px rgba(15,69,63,0.6),
      180px 100px rgba(15,69,63,0.6),
      190px 100px rgba(15,69,63,0.6),
      200px 100px rgba(15,69,63,0.6),
      210px 100px rgba(15,69,63,0.6),
      220px 100px rgba(15,69,63,0.6),
      230px 100px rgba(15,69,63,0.6);
}