Как залить все вокруг блока?

Question

[yvetrov]

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

Что у меня:


Что надо:

Answer 1

[Николай Чуприк]

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

#my_block  {
  width: 100px;
  height: 200px;
  box-shadow: 0 0 0 5000px rgba(0, 0, 128, 0.5); 
}

Comments

[yvetrov]

Сейчас попробую, спасибо за совет

[yvetrov]

Не лучшее решение

[Николай Чуприк]

yvetrov, так сделайте тени полупрозрачными. rgba(0, 0, 128, 0.5)

[Сергей Карвасарный]

yvetrov, читай сразу про Svg, чистого сss точно не хватит.

[Николай Чуприк]

yvetrov, вот: https://jsfiddle.net/bct7jma2

[Николай Чуприк]

Сергей Карвасарный, как вам вот такой CSS: https://codepen.io/wontem/pen/PqYXop.

[yvetrov]

Николай Чуприк, 404)

[yvetrov]

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

[Николай Чуприк]

yvetrov, что значит "не учитывает размеры родителя"? Тень заведомо огромная — и ладно.

[yvetrov]

Николай Чуприк, а надо, чтобы было только на родителя, чтобы уже за родителем не было тени

[Николай Чуприк]

Всё понял. Жопа, надо чего-то ещё сверху накладывать.

[Николай Чуприк]

yvetrov, Всё понял. Вот так: https://jsfiddle.net/ur5a14sv/
Т.е. надо просто добавить нижнему блоку overflow: hidden;

Меня сначала заклинило, и я написал overflow:none вместо hidden, и у меня не заработало, решил, что тени пофиг overflow. Ан нет.

Так что мой, мой вариант лучший!!

[yvetrov]

Николай Чуприк, спасибо, заработало, я, правда, вместо 5000px просто поставил 100vmax

[Николай Чуприк]

Вы что пикселы экономите!? Тогда достаточно 50vmax.

Answer 2

[origami1024]

Вот вариант:
1) Родителю белый фон
2) Самому блоку - бэкграунд родителя
3) На mouseMove изменять background-position соответственно перемещению блока
https://codepen.io/origami1024/pen/eYYRbmx

Comments

[yvetrov]

Решение отличное, но не подходит для меня. У меня width и height не фиксированный, а auto, следовательно background не работает

[origami1024]

yvetrov, width и height не должны быть фиксированы в моем примере, можно легко переделать

[origami1024]

yvetrov, уточни только, не очень понятно у какого элемента width и height auto

[yvetrov]

Да, у меня тоже работает, теперь другая проблема: у меня img в качестве src, а передать background-image src будет сложно, даже не знаю как.

[Николай Чуприк]

yvetrov, Речь об этом?background: url('...');

[yvetrov]

Николай Чуприк, да, так работает, но с src просидает производительность

[origami1024]

yvetrov,

но с src просидает производительность

хмм, как это определить?

[yvetrov]

origami1024, если постоянно передвигать, постепенно начинают проседание отображения

[origami1024]

yvetrov, ну тут я не помогу, теоретически тормозить не должно, мы же не загружаем картинку каждый раз, только изменяем координаты отображения. У меня в демке тормоза тоже есть? Если приведешь свой код, или лучше демку с кодом, можно посмотреть

[yvetrov]

origami1024, спасибо за решение, думаю, кому-нибудь пригодится

Answer 3

[ildar-meyker]

Посмотрите как это реализовано на https://vk.com/ при редактировании аватарки. Там два слоя изображений, и миниатюра создается за счет позиционирования верхнего слоя.