我可以检测图像是否在徽标下方吗？

Question

在我的主页上，我具有以下两个元素：

两个元素都是SVG图像。如果用户现在将主页最小化，则我在某些设备上会遇到徽标（与背景颜色相同的颜色）越过背景并且现在不可见的问题，直到启用了我的移动版式。

我在某些屏幕解决方案中存在此问题，并且更改每种分辨率的背景（而不是默认的分辨率（例如移动设备，台式设备等）不是很容易。

因此，我想知道是否可以检测我的徽标是否在背景图片上。如果它开始经过它，我想将溢出的部分制成白色，并将另一部分保持蓝色，以便仍然可见：

如果这行得通，我将提供一个适合我情况的简单代码，因为在可能的情况下，由于复杂性，我不认为自己无法使它运行。

更新因为DCR告诉我有可能，所以我现在提供一个示例：

#content {
  resize: both;
  overflow: auto;
  width: 700px;
  height: 400px;
  border: 3px solid;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='580' height='400' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3ctitle%3ebackground%3c/title%3e%3crect fill='%23fff' id='canvas_background' height='402' width='582' y='-1' x='-1'/%3e%3cg display='none' overflow='visible' y='0' x='0' height='100%25' width='100%25' id='canvasGrid'%3e%3crect fill='url(%23gridpattern)' stroke-width='0' y='0' x='0' height='100%25' width='100%25'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3ctitle%3eLayer 1%3c/title%3e%3crect stroke='%23000' id='svg_1' height='432.000047' width='409.999983' y='-12.546892' x='211.500021' stroke-width='0' fill='%2330a8a8'/%3e%3c/g%3e%3c/svg%3e");
  background-position: top right;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
}

#logo {
    width: auto;
    height: 65px;
    padding: 15px;
}

<div id="content">
  <img id="logo" src="data:image/svg+xml,%3Csvg width='389' height='175' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='177' width='391' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_2' height='1' width='2' y='71.5' x='-455.5' stroke-opacity='null' stroke-width='0' stroke='%23000' fill='%2330a8a8'/%3E%3Ctext font-weight='bold' xml:space='preserve' text-anchor='start' font-family='Arvo, sans-serif' font-size='52' id='svg_3' y='105.5' x='12.476563' stroke-opacity='null' stroke-width='0' stroke='%23000' fill='%2330a8a8'%3ECookiefreunde%3C/text%3E%3C/g%3E%3C/svg%3E">
</div>

Answer 1

如果我正确，这将通过减少/增加左.banner的css为您完成工作：-您可以对其进行测试

$(document).ready(function(){

// add + logo width + 1px , width 30 + 1 = 31px
var logo = $('.logo').offset().left + 51;
var banner = $('.banner').offset().left;


if(logo > banner){
console.log('banner is over the logo')
}

console.log('logo:' +logo)
console.log('banner:'+ banner)
})

.logo{
 height: 50px;
 width: 50px;
}

.banner{
 height: 130px;
 width: 130px;
 position: relative;
 left: -5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="logo" src="https://cdn-a.william-reed.com/var/wrbm_gb_food_pharma/storage/images/publications/cosmetics/cosmeticsdesign-asia.com/headlines/regulation-safety/why-iso-standards-are-crucial-for-organic-and-natural-transparency-cftas-president/10238025-1-eng-GB/Why-ISO-standards-are-crucial-for-organic-and-natural-transparency-CFTAS-president_wrbm_large.jpg">


<img class="banner" src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">