Question

我正在使用Extjs并想要应用下面的css（不透明度），但它不起作用PLZ帮帮我

  .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无法做到这一点。但是，既然你问了一个例子，我会把它交给你。

我再次高度怀疑这对你来说是值得的，但如果你知道所有背景图像的像素坐标和背景图像背后的背景，你可以编写一个非常长的盒子阴影属性，它基本上可以绘制块在你需要创造不透明幻觉的区域上的彩色像素。

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

您可以删除figure::before { }块，以查看应用不透明幻觉的位置。

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

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

1 个答案: