Увядание нижней части div над полупрозрачным фоном

У меня есть div, содержащий текст, размещенный на полупрозрачном фоне. Я бы хотел, чтобы нижняя часть этого div постепенно исчезла.Увядание нижней части div над полупрозрачным фоном

Для этого я использовал градиент. На непрозрачном фоне он работает без проблем.

#fadeout { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50%; 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    pointer-events: none; 
}

Я сделал это скрипач, показывая, что я хочу сделать: https://jsfiddle.net/ytuxn9Lu/6/ (ссылку отредактированной, чтобы добавить случайное фоновое изображение, см редактирование)

Проблема заключается в том, что градиен наложение добавляет с фоном и поэтому результат не то, что я хочу.

Что я могу сделать для этого?

Спасибо!

EDIT: Чтобы добавить дополнительную информацию, в реальном приложении body имеет изображение фона. Окно #parent имеет полупрозрачный фон и #fadeout-parent div содержит текст и fadeout div. Решение затем будет работать независимо от цвета фона/изображения (если возможно).

источник

2017-01-12 Shimrod

Вместо использования белого (255) RGB на градиенте используйте белый цвет с 70% RGB вместо (179): https: // jsfiddle.net/ytuxn9Lu/4/ – APAD1

Благодаря @ APAD1, похоже, он работает на черном фоне, но если вы меняете цвет (например, для синего), он по-прежнему показывает div как и раньше. – Shimrod

Не могли бы вы объяснить, каково ваше требование для фона? Можно ли предположить, что вы хотите, чтобы это работало над цветом _any_? – chazsolo

Если им лаять не то дерево, пожалуйста, простите меня.

Если вы просто пытаетесь исчезать текст из внутри DIV можно просто изменить на:

#parent { 
    background-color: white; 
    padding: 20px; 
}

Если вы хотите, чтобы фон ДИВ исчезать также вы можете попробовать положить цвет градиента на этой DIV , Возможно удалить

<div id="fadeout"></div>

всего.

источник

2017-01-12 22:48:06 EltonFlow

Проблема в том, что мне нужно, чтобы он работал с полупрозрачным фоном. Установка его на белый действительно работает, но это не то, что я хочу делать. – Shimrod

Существует решение здесь

https://jsfiddle.net/hgtdwbrL/1/

Я просто изменил значения градиента (используется цветовой палитры, чтобы получить цвет из-под содержания и добавил 0,9 прозрачности):

background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(179, 179, 179, 0.9) 95%);

источник

2017-01-12 23:49:51 Johannes

Как я говорю в комментариях, он будет работать только на черном фоне, но в реальном приложении фон - это изображение. Я добавил информацию об этом в сообщении только сейчас. Благодаря ! – Shimrod

ну, в этом случае (затухание на фоновом изображении) необходимо будет влиять на * цвет текста *. Я помню, что есть некоторые JS-плагины, которые позволяют заполнять формы букв текста с изображением, поэтому это может быть решение (с использованием того же изображения, что и для фона), но я никогда не пробовал этого. – Johannes

Я думаю, что идеальный способ достичь этого в настоящее время не существует.

Итак, есть еще одно сложное решение:

https://jsfiddle.net/ytuxn9Lu/9/

(code seems to be mandatory when posting jsfiddle link)

источник

2017-01-13 11:02:00 kipy

Это еще не идеальный вариант, если вы измените фон на сплошной цвет (например, красный), вы заметите, что непрозрачность более непрозрачна внизу, чем в верхней части. – Shimrod

Я нашел то, что может работать:

body { 
 
    background: url(https://unsplash.it/900/600?random); 
 
    padding: 50px; 
 
} 
 
#parent { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    padding: 20px; 
 
} 
 
#fadeout-parent { 
 
    position: relative; 
 
    -webkit-mask: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.65, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0))); 
 
}

<body> 
 
    <div id="parent"> 
 
    <div id="fadeout-parent"> 
 
     <h1>An h1 header</h1> 
 

 
     <p>Paragraphs are separated by a blank line.</p> 
 

 
     <p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p> 
 

 
     <ul> 
 
     <li>this one</li> 
 
     <li>that one</li> 
 
     <li>the other one</li> 
 
     </ul> 
 

 
     <p>Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.</p> 
 

 
     <blockquote> 
 
     <p>Block quotes are written like so.</p> 
 

 
     <p>They can span multiple paragraphs, if you like.</p> 
 
     </blockquote> 
 

 
    </div> 
 
    </div> 
 
</body>

Он имеет нисходящее, совместимость браузера. Я работаю в Chrome и Opera.

источник

2017-01-13 11:55:46 MarioZ

Не совсем, полупрозрачный фон должен оставаться как это происходит в примере, только текст должен быть тусклым. – Shimrod

@Shimrod Я обновил ответ. – MarioZ

Увядание нижней части div над полупрозрачным фоном

ответ

Смежные вопросы