исчезнуть div с горизонтальным изображением

Question

исчезнуть div с горизонтальным изображением

0

whitespace = bg image

http://i.stack.imgur.com/FbxQZ.png

КОД: html

<div class="container">
    <div id="content">
         <div id="item1"></div>
         <div id="item2"></div>
         <div id="item3"></div>
    </div>
</div>

CSS

body {background:url(image.jpg);}
.container {width:100%; height:50%; overflow-x:scroll;}
#item1, #item2, #item3 {height:100%; width:50%;}

Я искал, но все ответы говорят, что нужно использовать градиент прозрачного цвета. У меня есть bg-изображение (не в прилагаемом pic - извините), что я хочу, чтобы он исчез. Я видел это на других сайтах, я предполагаю, что JS?

user3533484 14 апр. 2014, в 23:04

Источник

1

Это очень запутанный способ задать вопрос. "whitespace = bg image" -> ссылка ... и т. д. очень Тарзан. Я хотел бы предложить немного больше времени для описания того, что вы хотите сделать, и чтобы вы нашли время, чтобы сделать jsFiddle
sheriffderek 14 апр. 2014, в 20:27

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Это очень запутанный способ задать вопрос. "whitespace = bg image" -> ссылка ... и т. д. очень Тарзан. Я хотел бы предложить немного больше времени для описания того, что вы хотите сделать, и чтобы вы нашли время, чтобы сделать jsFiddle

SauriolJf · Answer 1 · 2014-04-14T18-18-00.000Z

canvasimagegradient может помочь вам. Это позволяет рисовать линейный или линейный или радиальный прозрачный эффект градиента.

Следующий код - пример кода для создания линейного градиента:

ctx.drawImage(desertImage, 0, 0);

var linearGradient = ctx.createLinearGradient(0, 0, 0, googleImage.height);
linearGradient.addColorStop(0, "transparent");
linearGradient.addColorStop(1, "#000");

ctx.drawImageGradient(googleImage, 12, 65, linearGradient);

Это даст вам что-то вроде этого:

Обратите внимание, что вам нужно будет использовать холст

благодарю вас. я бы поместил элемент <canvas> вокруг #content? или поверх этого?
У меня нет опыта работы с canvas, но этот пост, кажется, указывает на правильный способ сделать это: stackoverflow.com/questions/6011378/how-to-add-image-to-canvas