使用混合混合模式和webkit蒙版複合時,圖像可以用作蒙版。例如,我可以使用白色圓圈作爲另一圖像上的遮罩,以僅顯示兩個元素中包含的區域。不是在任何元素之外。看到圖像的原始圖像是藍色的正方形,面具是圓圈。我只想顯示應用遮罩後留下的圖像的一點點。請注意,這是一個簡單的例子,我的實際面具要複雜得多,不能用基本的形狀來模仿。 maskcss混合混合模式和蒙版
0
A
回答
0
0
如果你想的jQuery我對你的解決方案:
function addOverlapBox() {
var wrapper = $('#wrapper'),
div1 = $('#div1'),
div2 = $('#div2'),
overlay = $('<div id="overlay"></div>');
wrapper.append(overlay);
setInterval(function() {
theta += 0.01;
div1 = $('#div1'),
div2 = $('#div2'),
overlay = $('#overlay');
var l1=100 + 20*Math.cos(theta);
var t1=80 + 50*Math.sin(theta);
var w1=div1.width();
var h1=div1.height();
var l2=70 + 30*Math.cos(2*theta);//div2.offset().left-8;
var t2=90 + 32*Math.sin(theta);//div2.offset().top-8;
var w2=div2.width();
var h2=div2.height();
div1.css({'top': t1, 'left': l1});
div2.css({'top': t2, 'left': l2});
var top = Math.max(t1,t2);
var left = (l2>l1 && l2<(l1+w1)) ? l2 : (l1>l2 && l1<(l2+w2)) ? l1 : 0;
var width = Math.max(Math.min(l1+w1,l2+w2) - Math.max(l1,l2),0);
var height = Math.max(Math.min(t1+h1,t2+h2) - Math.max(t1,t2),0);
overlay.css({'top': top, 'left': left, 'width': width, 'height': height});
}, 10);
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
theta = 0;
addOverlapBox();
#wrapper {position:absolute; margin-top:0px; width:500px; height:300px;padding: 0px;}
#div1 {background-color:rgba(100, 20, 180, 1); width:80px; height:80px;position:absolute; left:60px; top: 50px; z-index:2;border:0;}
#div2 {background-color:rgba(249, 177, 67, 1); width:110px; height:70px; position:absolute; left:60px; top: 100px; z-index:1;border:0;}
#overlay {background-color:rgba(0, 0, 0, 1); position:absolute;z-index:10;border:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
這是一個動畫,所以你可以看到,它不只是一個DIV,其中的div相交。這不適用於border-radius:50%
即tho,因爲具有圓形邊框的div實際上仍然是矩形,只是具有隱藏的邊框半徑。
這裏您可以找到一個非動畫版本:http://jsfiddle.net/GApu5/32/
相關問題
- 1. 在opencv python中混合漸變蒙版
- 2. 混合模式CSS3
- 3. 混合decrator模式和工廠模式
- 4. 白色和藍色混合混合模式
- 5. CSS混合模式不工作
- 6. Css背景混合模式替代
- 7. 使用混合混合模式和背景混合模式時的結果不同
- 8. Subversion混合版本?
- 9. 柔光混合模式
- 10. Asp.Net MVC - 混合Auth模式
- 11. QListView - 混合拖動模式
- 12. 混合模式調試
- 13. 混合模式C++/CLI System.IO.FileLoadException
- 14. self.class.name在混合式模塊
- 15. UIImage混合模式問題
- 16. MFC/CLI混合模式'System.AccessViolationException'
- 17. 運行testng混合模式
- 18. Excel混合模式錯誤
- 19. SVG中的混合模式
- 20. 爲什麼混合混合模式不能處理CSS中的字體/文本?
- 21. 表達式混合和模擬數據
- 22. 在Chrome中混合混合模式的問題
- 23. 原生反應:混合混合模式可能嗎?
- 24. OpenGL混合模式vs着色器混合
- 25. SQL Server 2008混合混合模式安全?
- 26. 混合混合模式被破壞的3D轉換
- 27. 動畫滯後,由於混合,混合模式屬性在Chrome
- 28. 應用混合混合模式後的較濃文本:差異
- 29. Visual Studio 2015企業版和混合版?
- 30. 表達式混合和minheight