8

введите сюда описание изображения

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

2 ответа 2

10

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>

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

2
  • Покопавшись, можно найти реально золотые правила. Когда-то сильно удивился Grid-модулю, было времечко.
    – user207618
    18 мая 2018 в 5:38
  • 1
    tuhub.ru/posts/css-grid-complete-guide
    – user207618
    18 мая 2018 в 5:47
1

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

  1. Первый шаг — создаём некий квадрат который применим для маски к второму изображению.

  2. В генераторе Inkscape сгенерим filter.

  3. Применим этот filter к нашему квадрату.

  4. Для самого высокого изображения ни каких фильтров кроме параметра width и height и для обоих изображений preserveAspectRatio="none"

  5. Для изображения которое на половину видно применяем как маску наш 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.

3
  • 1
    Я конечно прошу прощения но это ни в какие ворота не лезет, вы сами видели свой градиент? Я понимаю что на него ушло хорошо так работы, но это разве что на какой-то пиксельный дизайн подойдет.
    – Telion
    18 мая 2018 в 3:36
  • Ох, окей. Но все же куда проще и практичнее будет наложить картинки с градиентом в прозрачность.
    – Telion
    18 мая 2018 в 3:43
  • Да я уже понял что я тормоз :D
    – Telion
    18 мая 2018 в 4:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.