Прозрачность gradleиента в нижней части div

Я хотел бы создать эффект, как на этом изображении – непрозрачность gradleиента в нижней части содержимого: помутнение

Как мне это сделать?

Вы можете использовать этот HTML-код

Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text
Loriem ispsum is simply dummy text

С помощью этого CSS

 body{background:#000;} .content{ width:500px; height:300px; position:relative; color:#fff; overflow:hidden; } .gradientback{ position:absolute; bottom:0px; left:0px; width:100%; height:50px; background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } направо body{background:#000;} .content{ width:500px; height:300px; position:relative; color:#fff; overflow:hidden; } .gradientback{ position:absolute; bottom:0px; left:0px; width:100%; height:50px; background: -moz-linear-gradient(top, rgba(137,255,241,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,255,241,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(137,255,241,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089fff1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } 

Вот ссылка jsfiddle

Надеюсь, вы хотите что-то подобное.

 div { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333)); } 

Просто используйте изображение и установите его в нижней части.
CSS Tricks имеют сообщение об этой проблеме и предоставляют также изображение.

Или, если вы хотите его с помощью CSS, следуйте этой статье, в которой показано, как это сделать с помощью CSS и JavaScript.

У вас может быть повторяющееся изображение. Например, gradleиент высоты 10px.

поместите свой div в относительную:

 /* Example width*/ div { position : relative; width : 500px; } 

Ваше изображение будет абсолютным положением

 #gradientImage { height : 10px; background : url(path/to/image.png) repeat x; position : absolute; bottom : 0; } 

РЕДАКТИРОВАТЬ

Ваш div также должен иметь ширину, чтобы ваше повторяющееся изображение зависело от ширины родительского