Полупрозрачный градиент фонового изображения

218

27 мая 2018, 08:30

Возможно ли средствами CSS изменить прозрачность фонового изображения (background-image) линейно, при помощи градиента. Именно прозрачность, а не наложение цвета сверху, дабы получить «смешивание» наложенных друг на друга изображений с указанием положения начала (100% видимость) и положения окончания (0% видимость) градиента? Либо другие не громоздкие варианты получения схожего результата.

Answer 1

Use the mask, Luke!

div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  width: 256px; height: 256px; 
} 
#left { 
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg"); 
} 
#right { 
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg"); 
  -webkit-mask: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%); 
} 
 
#originalLeft { 
  top: 400px; 
  background: url("https://www.rwsfl.org/wp-content/uploads/2015/06/N2-256x256.jpg"); 
} 
#originalRight { 
  top: 400px; 
  left: 300px; 
  background: url("https://pbs.twimg.com/profile_images/633782900077408256/F541mrSs_400x400.jpg"); 
}

<div id='left'></div> 
<div id='right'></div> 
<div id='originalLeft'></div> 
<div id='originalRight'></div>

Поддержка достаточно неплохая, но неполная на момент ответа.

Answer 2

Я предлагаю использовать SVG для этих целей

Первый шаг — создаём некий квадрат который применим для маски к второму изображению.
В генераторе Inkscape сгенерим filter.
Применим этот filter к нашему квадрату.
Для самого высокого изображения ни каких фильтров кроме параметра width и height и для обоих изображений preserveAspectRatio="none"
Для изображения которое на половину видно применяем как маску наш rect и располагаем ниже чем прошлое изображение и в итоге получаем это:

<svg viewBox="0 0 640 480" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<image xlink:href="https://i.ytimg.com/vi/wmkWkRWuKe4/maxresdefault.jpg" 
           preserveAspectRatio="none" 
           width="100%" 
           height="100%" 
           x="0" 
           y="0" 
       /> 
 <image xlink:href="http://cn1.nevsedoma.com.ua/images/2011/104/4/12147000.jpg"  
           preserveAspectRatio="none" 
           width="100%" 
           height="100%" 
           x="0" 
           y="0"  
           mask="url(#mask)"/> 
<defs> 
 <filter 
       id="filter" 
       style="color-interpolation-filters:sRGB;" 
       height="1.1" 
       width="1.1" 
       y="-0.05" 
       x="-0.05"> 
      <feGaussianBlur 
         id="feGaussianBlur907" 
         result="result1" 
         stdDeviation="5" /> 
      <feComposite 
         id="feComposite909" 
         operator="xor" 
         result="result4" 
         in2="result1" 
         in="result1" /> 
      <feGaussianBlur 
         id="feGaussianBlur911" 
         result="result6" 
         stdDeviation="8" /> 
      <feComposite 
         id="feComposite913" 
         result="result8" 
         in2="SourceGraphic" 
         in="result6" 
         operator="atop" /> 
      <feComposite 
         id="feComposite915" 
         in2="result8" 
         in="result6" 
         result="fbSourceGraphic" 
         operator="in" /> 
      <feColorMatrix 
         id="feColorMatrix917" 
         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 2 0 " 
         in="fbSourceGraphic" 
         result="fbSourceGraphicAlpha" /> 
      <feGaussianBlur 
         id="feGaussianBlur919" 
         stdDeviation="2" 
         in="fbSourceGraphicAlpha" 
         result="result0" /> 
      <feSpecularLighting 
         id="feSpecularLighting923" 
         in="result0" 
         result="result1" 
         lighting-color="rgb(255,255,255)" 
         surfaceScale="-5" 
         specularConstant="2" 
         specularExponent="25"> 
        <fePointLight 
           id="fePointLight921" 
           x="-5000" 
           y="-10000" 
           z="20000" /> 
      </feSpecularLighting> 
      <feComposite 
         id="feComposite925" 
         in2="fbSourceGraphicAlpha" 
         in="result1" 
         result="result2" 
         operator="in" /> 
      <feComposite 
         id="feComposite927" 
         in2="result2" 
         in="fbSourceGraphic" 
         result="result4" 
         operator="arithmetic" 
         k2="1" 
         k3="2" /> 
      <feComposite 
         id="feComposite929" 
         in2="result4" 
         result="result9" 
         in="result4" 
         operator="in" /> 
      <feBlend 
         id="feBlend931" 
         in2="result4" 
         in="result9" 
         mode="multiply" /> 
    </filter> 
</defs> 
  <defs>  
      <filter 
       height="1.4567636" 
       y="-0.2283818" 
       width="1.3276783" 
       x="-0.16383914" 
       id="filter1" 
       style="color-interpolation-filters:sRGB"> 
      <feGaussianBlur 
         id="feGaussianBlur1003" 
         stdDeviation="14.243276" /> 
      <feBlend 
         id="feBlend1005" 
         in2="BackgroundImage" 
         mode="overlay" /> 
    </filter> 
  </defs> 
  <defs> 
  <mask id="mask"> 
   <rect  width="350px" height="520px" x="-20px" y="-20px" style="fill:#fff;" filter="url(#filter1)" /> 
  </mask> 
  <defs> 
</svg>

Естественно что маски и фильтры надо располагать между тегами defs и тот слой что ниже на самом деле выше, это работает как z-index в CSS.

Не будет работать в Edge и IE.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JS Как подружить select+option и localStorage

Помогите разобраться

215

javascript

Функция вычисления площади

234

javascript

Отображение v-checkbox в v-data-table

необходимо в v-data-table отображать CheackBox: использую гайд, но если я переменную value изменяю с false на true CheackBox на странице отображается как "не выбранный"

192

javascript

почему не работает функция autoslider js

нужно чтобы слайдер срабатывал по таймеру почему не работает незнаю

192