Могу ли я определить, попадает ли изображение под мой lo go?

Question

На моей домашней странице есть два элемента:

Оба элемента являются изображениями SVG. Если пользователь теперь свернул домашнюю страницу, у меня на некоторых устройствах возникает проблема, связанная с тем, что lo go (того же цвета, что и фон) переходит на задний план и теперь невидим, пока мой мобильный макет не будет включен.

У меня есть эта проблема в некоторых решениях экрана, и не очень легко изменить фон для каждого разрешения (вместо значений по умолчанию, таких как mobile, tabled et c.).

Так Я хочу знать, возможно ли определить, проходит ли мой lo go фоновое изображение. Если он начинает go над ним, я хочу сделать переливающуюся часть белым цветом, а другую часть оставить синим, чтобы она оставалась видимой:

Если это может сработать, я предоставлю простой код, который соответствует моей ситуации, потому что, когда это возможно, я не думаю, что не могу заставить его работать самостоятельно из-за сложности.

Обновление
Поскольку 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

если я вас правильно понял, это сделает работу за вас, уменьшив / увеличив css для .banner слева: - вы можете проверить это

$(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">