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

Question

Я довольно уверен, что это невозможно, но я решил проверить, прежде чем перейти к Плану B. У меня есть <header>, в котором есть фотография, которую пользователь может переключить по желанию. левый край становится прозрачным, чтобы показать остаток основного цвета или рисунка или чего-то еще ... независимо от того, что это, оно также предоставляется пользователем, так что это может быть что угодно.

Для того, чтобы сохранить дизайн при разрешениипользователи, которые не знают или не имеют доступа к редактору изображений, который будет применять маску к фотографии, которую они хотят использовать, я пытаюсь найти способ использовать неотредактированную текстуру / цвет вместе с неотредактированной фотографией для получения следующего эффекта:

Все, что я могу предложить прямо сейчас, - это вручную применить маску от 100% белого до 0% белого к левому краю фотографии в Photoshop. ,Но, как я уже сказал, это не может быть сделано моим целевым пользователем - мне нужно, чтобы он мог загрузить новое изображение и сохранить эффект перехода изображения в фоновый режим.

Я сделал этоуспешно с 1 из 2 элементов, являющихся сплошным фоном с псевдоэлементом, как в этот CodePen (чрезвычайно грубый - только для подтверждения концепции). Но опять же, мне нужно ОБА содержимое и фон .inner и фон .outer, предоставляемый пользователем (и, возможно, измененный в ответных событиях браузера). То же перо также показывает версию, использующую -webkit-mask-image вместо псевдоэлемента, которая приближает его, но не поддерживает IE.

Без расширенного кодирования SVG (это не стоит времени - для этого варианта использования- чтобы сохранить изменяемый фоновый узор / изображение), есть ли способ (предпочтительно PURE CSS) для достижения этого маскирующего эффекта без необходимости редактировать любое изображение?

Answer 1

Как сказал @Bryce Howitson, вы можете использовать mask

.box {
  width:300px;
  height:200px;
  position:relative;
}
.box:before,
.box:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-image:url(https://picsum.photos/id/2/800/800);
   background-size:cover;
   background-position:center;
}
.box:after {
   background-image:url(https://picsum.photos/id/13/800/800);
   -webkit-mask:linear-gradient(to right,#fff 35%,transparent 70%);
   mask:linear-gradient(to right,#fff 35%,transparent 70%);
}

<div class="box">

</div>

Answer 2

¯_ (ツ) _ / ¯

ЕСЛИ поддержка IE - сложное требование, вам почти не повезло, используя чистый CSS для маскировки. Вы можете просто сбросить поддержку IE, а затем перейти к mask-image, так как он даже работает в MS Edge. Только ваша собственная статистика использования может сказать вам, если это хорошая идея.

Вариант 2

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

Вариант 3

Это много работы, но вы могли бы использовать Canvas и Javascript, чтобы подделать его. Основная идея состоит в том, чтобы разделить основное изображение на отдельные элементы холста. По одному элементу для каждого пикселя в ширину изображение затем рисует исходное изображение в элементах холста с правильным смещением. Затем ломтики укладываются рядом на холсте, создавая полное изображение. На этом этапе вы можете изменять непрозрачность каждого среза, пока не получите эффект постепенного исчезновения.

Например, если изображение постепенно исчезает с правой стороны, самый дальний правый срез становится непрозрачным на 0%, следующийслева - 1%, затем - 2% и т. д.

Это не проверено, но что-то в этом направлении, за исключением того, что оно равномерно исчезает из непрозрачного левого в правый trasnparent:

var theCanvas = document.getElementById('canvasContainer');
fadeImage = theCanvas.getContext('2d');
for (var i = 0; i < sourceImage.width; i++) {
    fadeImage.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    fadeImage.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);
}