CSS3 - 不同 HTML 元素之间的混合模式
CSS3 - Blending Mode between different HTML Elements
我很清楚答案会是什么,但我只是想绝对确定。
我有两个元素,div.glass
和 div.sound
,都包含背景图像。是否可以为每个 div 设置混合模式,以便它们相互交互?例如:
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url(glass.png) 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url(soundwave.png) 0 0 no-repeat;
z-index: 10;
blend-mode: multiply;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>
您可能需要使用 background-blend-mode
而不是 blend-mode
:
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url("http://i656.photobucket.com/albums/uu288/dragon-g/glass.png") 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url("http://vignette3.wikia.nocookie.net/youngjustice/images/e/ee/Sound.png/revision/latest?cb=20130330173251") 0 0 no-repeat;
z-index: 10;
background-blend-mode: multiply;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>
您可以为单个 div 添加两个背景。这样,您可以使用 'background-blend-mode' 属性 来混合两个图像。
举个例子:
https://jsfiddle.net/4mgt8occ/3/
HTML
<div class="container">
<div class="glass_sound"></div>
</div>
CSS
div.glass_sound {
width:300px;
height: 300px;
background-size: 100%;
}
.glass_sound {
background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?dpr=2&fit=crop&fm=jpg&q=75&w=1050'), url('https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?dpr=2&fit=crop&fm=jpg&q=75&w=1050');
background-blend-mode: multiply;
}
您有 2 种使用混合模式的方法
在同一元素中执行此操作时,属性 为背景混合模式。
但是,当使用 2 个元素时。它是 mix-blend-mode
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url(http://placekitten.com/1200/900) 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url(http://placekitten.com/1000/750) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>
我很清楚答案会是什么,但我只是想绝对确定。
我有两个元素,div.glass
和 div.sound
,都包含背景图像。是否可以为每个 div 设置混合模式,以便它们相互交互?例如:
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url(glass.png) 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url(soundwave.png) 0 0 no-repeat;
z-index: 10;
blend-mode: multiply;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>
您可能需要使用 background-blend-mode
而不是 blend-mode
:
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url("http://i656.photobucket.com/albums/uu288/dragon-g/glass.png") 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url("http://vignette3.wikia.nocookie.net/youngjustice/images/e/ee/Sound.png/revision/latest?cb=20130330173251") 0 0 no-repeat;
z-index: 10;
background-blend-mode: multiply;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>
您可以为单个 div 添加两个背景。这样,您可以使用 'background-blend-mode' 属性 来混合两个图像。
举个例子: https://jsfiddle.net/4mgt8occ/3/
HTML
<div class="container">
<div class="glass_sound"></div>
</div>
CSS
div.glass_sound {
width:300px;
height: 300px;
background-size: 100%;
}
.glass_sound {
background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?dpr=2&fit=crop&fm=jpg&q=75&w=1050'), url('https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?dpr=2&fit=crop&fm=jpg&q=75&w=1050');
background-blend-mode: multiply;
}
您有 2 种使用混合模式的方法
在同一元素中执行此操作时,属性 为背景混合模式。
但是,当使用 2 个元素时。它是 mix-blend-mode
div.glass,
div.sound {
width: 597px;
height: 154px;
position: absolute;
}
div.glass {
background: url(http://placekitten.com/1200/900) 0 0 no-repeat;
z-index: 9;
top: 5px;
left: 5px;
}
div.sound {
background: url(http://placekitten.com/1000/750) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 50px;
left: 300px;
}
div.container {
position: relative;
}
<div class="container">
<div class="glass"></div>
<div class="sound"></div>
</div>