Простите, а Вы вообще понимаете принципы разметки?
Не все. Но если бы понимал хорошо, то не спрашивал бы. С другой стороны если бы совсем ничего не понимал, то и спросить не смог бы 
Так возможно сделать появление этой тени над картинкой?
Простите, а Вы вообще понимаете принципы разметки?
Не все. Но если бы понимал хорошо, то не спрашивал бы. С другой стороны если бы совсем ничего не понимал, то и спросить не смог бы
Так возможно сделать появление этой тени над картинкой?
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вертикальный скроллинг изображения с тенью при прокрутке</title>
</head>
<body>
<style>
.scrollbox {
overflow: auto;
width: 880px;
max-height: 400px;
margin: 30px auto;
background:
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}
</style>
<div class="scrollbox">
<ul>
<li>Тени нет сверху.</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>Начинаем прокручивать блок</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>Конец!</li>
<li>Тут нет тени снизу.</li>
</ul>
<img src="file://localhost/С:/image.png" alt="" />
</div>
</body>
</html>