Удаление тени прямоугольника непосредственно под прозрачной частью логотипа

#html #css

#HTML #css

Вопрос:

Мне нужно удалить тень окна прямо под прозрачным png. Теперь вы можете видеть тень прямоугольника под этим прозрачным полукругом. Могу ли я как-то это сделать?

Вот демонстрация.

Проблемная часть находится под логотипом.

 header {
    border-bottom: none;
    height: 50px;
    padding: 20px 0 20px 0;
    background: rgba(255,255,255,0.9);
    z-index: 10 !important;
    -webkit-box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
    box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
      position: fixed;
    top: 0px;
    width: 1000px;
  margin:0 auto 0 auto;
  left:0px
  
}

 <html>
<header>
  <img src="https://png.pngtree.com/element_our/sm/20180518/sm_5aff6089d3e02.png" style="height:80px;margin-left:200px">
  <img src="http://vitezslavlorenc.cz/obloucek2.png" style="width: 51px;
    height: 8px;
    /* position: relative; */
    bottom: -8px;
    position: absolute;
    left: 215px;">
</header>
<div style="height:1000px;  width: 1000px;
  ;
  position:relative;">
  <img src="https://wpshindig.com/content/uploads/2018/02/Feature-Header-Image.png" style="position:absolute;top:0px;width:1000px;z-index:-1" >
</div>

https://codepen.io/korwinus/pen/bZJOgM

1. Я не уверен, что понимаю. я вижу белый полукруг, и он закрывает тень прямоугольника, я не вижу тени под ним. Я не уверен, что понимаю, о чем вы здесь просите. Это то, что я вижу в Chrome: i.imgur.com/I2kygF6.png

2. Да, он закрывает тень прямоугольника, но этот полукруг выполнен в полупрозрачном формате png, так что вы можете видеть некоторые части этой тени за ним (немного, но она есть). То, что вы видите в chrome, как раз и является проблемой.

3. Мне все еще не ясно… у вас есть полупрозрачное изображение, и вы хотите, чтобы его вообще не было видно? Я не думаю, что возможно изменить прозрачный png на непрозрачный в CSS. Почему бы просто не использовать полностью непрозрачное изображение или просто нарисовать фигуру с помощью CSS border-radius ?

4. Я хочу, чтобы это изображение или фигура в css (не имеет значения) игнорировали тень окна, но также оставались прозрачными. Мне это нужно, потому что этот заголовок будет иметь фиксированное положение и будет прокручиваться вместе со страницей по мере того, как пользователь скатывается вниз. Я обновляю свой код, чтобы он был более понятным.

5. теперь я понимаю, что вы имеете в виду. вам нужна тень, но вы хотите «вырезать фигуру» в тени, но вы также хотите, чтобы вырез был прозрачным для того, что находится за формой и тенью, я не уверен, что это возможно … или, по крайней мере, потребовалось бы много работы для достижения этого эффекта. Все, что я знаю, что нужно сделать, это создать кучу прозрачных элементов с тенями, а затем расположить их по полукругу для достижения аналогичного эффекта.

Ответ №1:

Взгляните на эту ссылку codepen

https://codepen.io/hoonin/pen/OqYVRr

Хотя вы не можете «скрыть» тень прямоугольника только в этой части, вы можете придать изображению более высокое значение z-индекса, чем элементу с тенью прямоугольника. Это означает, что оно будет отображаться «над» ним. Добавление цвета фона и некоторого нижнего отступа к изображению создает иллюзию, что тень прямоугольника исчезает в этой области.

Вот код для класса, который я создал для изображения (удалил встроенные стили для):

  .ig-logo {
  background-color:#fff;
  border-radius:50%;
  z-index:9999;
  height:80px;
  margin-left:200px;
  padding-bottom:5px;
}

1. Я обновил свой код вопроса. Итак, теперь это более понятно. Мне нужно, чтобы эти части (заголовок, логотип и полукруг) оставались прозрачными. Если я помещу что-то под это, чтобы скрыть тень окна, то некоторые части не будут прозрачными.