参见英文答案 >
Invert CSS font-color depending on background-color2个
我有一个可拖动的div在蓝色段落下,我想改变div上的段落颜色的部分……如下图
我有一个可拖动的div在蓝色段落下,我想改变div上的段落颜色的部分……如下图
这是我的代码：
<html>
<head>
<script>
$(document).ready(function(){
$("#div1").draggable();
});
</script>
<style>
#div1{
position : absolute ;
top : 10px ;
left : 20px ;
background : black ;
width : 200px ;
height : 200px ;
cursor : move ;
}
#p1{
position : absolute ;
top : 100px ;
left : 200px ;
color : blue ;
}
</style>
<head>
<body>
<div id="div1"></div>
<p id="p1">some text</p>
</body>
</html>
jsfiddle：https://jsfiddle.net/e7qvqot9/
解决方法
也许这样做：
你需要有两个独立的paraghraps,第一个是蓝色,位于div内,第二个是蓝色,可以在div外面找到.
设置z顺序,因此白色文本位于顶部,然后是div,蓝色段落. div还需要具有overflow：hidden属性.
这部分有点挑剔.将蓝色文本放在某处,例如,ypu当前有(100; 200).然后,设置白色段落,因此divs位置相对于左上角,parapgraph相对于div的位置等于第一段的位置.所以,如果你有div(10; 20),那么你需要在(90; 180)相对于div的段落.
这适用于大多数浏览器,其中z-ordering有效.但是,您可以通过将元素放在rigjt位置来绕过它
在这里,我举了一个例子
这是目前最短的解决方案
