Question

我在css中使用mix-blend-mode来附加photoshop风格的乘法效果。但是，效果似乎会影响该区域中的所有div，而不仅仅是下面（后面）的div。

HTML：

<body>
    <div id="PageContents">
        <div id="About">
            <div class="ContentHolder" id="AboutContents">
                <div class="GalleryHolder">
                    <div class="ImageFrame" id="AboutGallery"></div>
                    <!-- ... so on, close the divs respectively -->

CSS：

div#PageContents {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-image: url("images/1800/VAR-1800-BACKGROUND_copy.png");
    background-repeat: repeat-y;
}
div#About {
    width: 100%;
    height: 640px;
    margin-bottom: 60px;
    background-image: url("images/1800/VAR-1800-about_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    mix-blend-mode: multiply;
}
div#About div#AboutContent {
    height: 600px;
}
div.GalleryHolder div.ImageFrame {
    position: relative;
    top: 0;
    left: 0;
    width: 315px;
    height: 315px;
    margin-left: 55px;
    background-repeat: no-repeat;
    background-position: -15px -15px;
    background-size: 345px;
    border: 15px solid;
    border-color: rgba(210,211,212,0.6);
}
div#About div#AboutContent div.GalleryHolder div#AboutGallery {
    background-image: url("images/gallery/about/IMG_2578.jpg");
}

因此，＃PageContents的背景主要是灰度模式。然后#About有一个背景的实际灰色图示，但为了让它有点生气，我添加了多重效果。但是，＃About背景并不是唯一的倍增，它也是里面的图像.ImageFrame＃AboutGallery。

如何避免混合混合模式影响图像？

我尝试使用背景混合模式，但显然所有混合图像都需要在同一个div中，这不是一个选项。

CSS3背景混合模式问题

0 个答案: