CSS увядает с фоном

Question

Я так повсюду выгляжу так, что похоже, что это пока невозможно. Я ищу что-то вроде маски градиента непрозрачности, если это имеет смысл.

Как это:

Он может просто выглядеть как прямо вперед текста замирания от белого к прозрачному, но это тем более, что это ДИВ, что текст, внутри которого исчезает на фоне. Текст переполняется вне области div, поэтому он указывает пользователю прокрутку вверх.

Так что это как маску слоя с градиентом в фотошопе, может быть, что-то вроде {opacity: linear-gradient(#fff, #000)}, что-то вроде этого существует?

Возможно ли это с помощью CSS?

Answer 1

Вы можете получить этот эффект маскирования. маска-образ = градиент делает

.base { 
 
    background: url("http://placekitten.com/1000/750"); 
 
    width: 400px; 
 
    background-size: cover; 
 
} 
 

 
.faded { 
 
    -webkit-mask-image: linear-gradient(0deg, transparent, black); 
 
    }

<div class="base"> 
 
    <div class="faded">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tincidunt augue. Vestibulum sit amet est et tellus blandit bibendum quis id neque. Quisque lacinia, nunc et pharetra egestas, mi sapien tristique ante, quis fringilla sem leo et eros. Donec porttitor id nisl non egestas. Cras sed neque consectetur, hendrerit est in, ullamcorper sem. Suspendisse dolor nunc, maximus ac elit efficitur, congue tempus nisi. Fusce nec imperdiet mi, a porttitor sem. Vestibulum tincidunt, libero a lacinia commodo, felis sapien malesuada turpis, eu accumsan ligula elit vestibulum ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida varius ex ac luctus. In non sapien nibh. Aliquam efficitur eu risus vitae aliquam. Nunc risus est, tincidunt sit amet consectetur quis, bibendum nec tellus. Vivamus non faucibus velit, nec tempor quam. 
 

 
Morbi sem tortor, tristique at ex in, cursus gravida ante. Curabitur ut mi id arcu semper ullamcorper id mollis nibh. Phasellus et pharetra odio. Mauris lacinia hendrerit ante. Donec cursus urna felis, vitae dictum neque varius sit amet. Donec ut tristique turpis. Integer faucibus dictum tempus. Suspendisse id eros a erat sodales hendrerit. Ut et mauris quis sapien dictum pharetra. Pellentesque ornare nulla diam, porttitor interdum felis ultricies non. Proin tempus libero in lacus efficitur elementum. Morbi venenatis dignissim ante, sed bibendum libero tempor vitae.</div></div>

Это будет работать только на WebKit браузерах.Вы можете получить поддержку Firefox, сделав это на элементе svg.

Answer 2

Вы можете использовать это:

background:-moz-linear-gradient(-65deg, #e0e0e0 30%, #e0e0e0 10%, 
#e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70%); 
filter:progid:DXImageTransform.Microsoft.gradient 
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f'); 
/* For Internet Explorer 5.5 - 7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient 
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f')"; 
/* For Internet Explorer 8 */} 

здесь:

-65deg, #e0e0e0 30%, #e0e0e0 10%, #e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70% 

Для настройки IE выглядит, вы можете стилизовать его здесь:

startColorstr='#4285F4', endColorstr='#63a62f' 

вы можете настроить цвет вы хотите и количество procentage для стиля линейного градиента.

Answer 3

Да его возможно. Вы можете использовать такие инструменты, как CSS Gradient Generator, чтобы получить нужные цвета градиента (даже прозрачные пленки). Затем вы можете сделать div, который над текстом. В вашем случае вы хотите выбрать вертикальное затухание, а затем позволить верхней части быть прозрачной, а нижняя - иметь цвет. Затем вы можете поместить этот div с градиентным фоном над текстом. Вот код, который я использовал:

CSS

.over { 
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-9 */ 
    width: 600px; 
    height: 600px; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.text { 
    color: red; 
    width: 580px; 
} 

HTML

<div class="over"></div> 
<div class="text"> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
</div> 

вам нужно будет играть с кодом для того, чтобы заставить его работать на конкретной среде, но это должно получить ты начал. You can see it in action here. Надеюсь, это поможет.

Answer 4

Вы можете использовать псевдо-элемент для этого (что приведет к сокращению разметки, а также ускорить рендеринг):

(. Примечание это только проект только для иллюстрации Пожалуйста, используйте свой собственный колорит.).

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
div{ 
 
    position:relative; 
 
    height:300px; 
 
    width:400px; 
 
    margin:0 auto; 
 
    display:inline-block; 
 
    overflow:auto; 
 
    align-content:center; 
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    height:300px; 
 
    width:400px; 
 
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ 
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ 
 
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ 
 
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ 
 
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */ 
 
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=0); /* IE6-9 */ 
 

 
    }

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse justo sapien, ultrices vel lorem eu, dapibus commodo dui. Maecenas sagittis massa id libero malesuada, et vehicula libero dapibus. Etiam porta luctus tellus volutpat tempus. Etiam urna 
 
    velit, consequat sit amet nisl non, laoreet auctor quam. Suspendisse pellentesque ultricies ullamcorper. In commodo finibus lacinia. Sed eget lobortis sem. Nulla egestas hendrerit odio at elementum. Mauris orci orci, viverra id lectus id, elementum 
 
    varius lorem. Mauris efficitur lectus non laoreet aliquam. Aliquam laoreet elit justo, ut accumsan purus vestibulum at. Suspendisse eget fermentum leo. Integer laoreet mi sit amet turpis luctus lobortis. Aliquam auctor lacinia nisl, in interdum mi posuere 
 
    ut. Sed turpis ante, efficitur vitae mi eu, tristique iaculis neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mattis dolor sit amet iaculis malesuada. Nulla pulvinar, sapien quis vehicula ullamcorper, 
 
    magna ante euismod ex, id placerat arcu nisi vel urna. Etiam lorem velit, bibendum congue bibendum in, tincidunt eget magna. Integer dictum molestie felis, eget bibendum velit aliquam vel. Quisque felis purus, bibendum vel augue ut, vestibulum iaculis 
 
    lorem. Proin in mi aliquam, aliquam erat quis, imperdiet nibh. Nulla scelerisque sollicitudin nisi et dignissim. Proin placerat leo dolor, non hendrerit lacus aliquet quis. Nam tempus, urna sed sollicitudin porttitor, tellus felis hendrerit eros, et 
 
    lacinia arcu arcu id lectus. Duis molestie arcu in finibus dictum. In porttitor massa sit amet urna porta, sed iaculis leo fermentum. Quisque augue risus, pulvinar nec est sit amet, commodo fringilla velit. In blandit urna eget quam finibus, ac facilisis 
 
    ante tincidunt. Duis luctus libero eu aliquet viverra. Suspendisse tincidunt eros euismod suscipit scelerisque. Sed tincidunt enim vel ultrices pellentesque. Cras id volutpat metus. Sed sagittis ut quam vel dapibus. Nulla interdum ut enim sed gravida. 
 
    Suspendisse lacinia orci ut tellus imperdiet, hendrerit rhoncus mi rhoncus. Nulla tempus risus erat, nec convallis quam imperdiet vitae. Sed sodales malesuada hendrerit. Proin malesuada erat nec arcu faucibus feugiat. In hac habitasse platea dictumst. 
 
    Suspendisse sagittis nunc id risus hendrerit, ut luctus augue maximus. Nunc varius sit amet arcu eu sagittis. Pellentesque convallis convallis finibus. Nulla rhoncus risus in ipsum pharetra tempus. Aenean id accumsan leo. Mauris imperdiet suscipit est, 
 
    sed vehicula neque sagittis nec. Mauris sit amet tincidunt velit. Quisque scelerisque facilisis ligula sit amet aliquam. Maecenas vel magna vel sapien congue congue quis ut orci. Vivamus vel elementum erat. Duis scelerisque odio sed ligula condimentum 
 
    fermentum. Praesent ac arcu eu nibh vehicula tempus ut sed lorem. Vestibulum ligula sapien, ornare et vehicula in, gravida et mauris. Vestibulum dignissim tellus eu nulla consequat pharetra. Praesent varius sem et ultricies bibendum. Maecenas cursus 
 
    egestas egestas. Sed mollis, orci malesuada tempor malesuada, sem elit ornare odio, ac hendrerit metus lorem faucibus sem. Cras lacinia elementum arcu sed cursus. Integer cursus velit arcu, sit amet commodo metus ultricies ultricies. In hac habitasse 
 
    platea dictumst. Nulla pellentesque sem sapien. Cras lobortis in ante in vestibulum. Nulla faucibus, lectus et mattis vehicula, ex arcu interdum enim, nec efficitur elit tortor id dolor. Curabitur scelerisque tempor tellus vitae lacinia. Vivamus eget 
 
    dolor quis diam pretium ultrices vitae eu ipsum. 
 
</div>