CSS тень прокрутки не появляется поверх цвета фона - PullRequest
Новая
       42

CSS тень прокрутки не появляется поверх цвета фона

0 голосов
/ 29 марта 2020

Я добавил тени, которые появляются при прокрутке таблицы, но если таблица имеет цвет фона, тень не отображается. (ссылка: http://lea.verou.me/2012/04/background-attachment-local/ найдена здесь в stackoverflow).

Кто-нибудь знает, как я могу показать эффект тени прокрутки таблицы поверх цвета фона таблицы? 

.pagewrap1 {
	width: 90%;
	background-color:orange;
	margin:0 auto;
	padding: 0 20px 0 20px;
}

div.data {
	background-color:yellow;
}

table.data {
	border-width: 0px;
	width:750px;
	/*background-color:lightskyblue;*/
}
.auto-style2 {
	border-style: solid;
	border-width: 1px;
}

.auto-style2b {
	border-style: solid;
	border-width: 1px;
	background-color:purple;
}

#cell01 {
	background-color:#99FFCC
}

#cell02 {
	background-color:#CCFFCC
}

#cell03 {
	background-color:#FFFFCC
}

#cell04 {
	background-color:aqua
}

@media only screen and (max-width: 740px) {

.pagewrap {
	background-color:blue;
}

.scroll {
	overflow-x: scroll;
	margin-left: 30px;
	background-image: 

    /* Shadows */ 
    linear-gradient(to right, yellow, yellow),
    linear-gradient(to left, yellow, yellow),
    /* Shadow covers */
    linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));

  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;

  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;

  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;


}
.auto-style2b {
	position: absolute;
	left: 30px;
	width:25px;
}


table.data {
	width:100%;	
}

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>



</head>

<body>

<div class="pagewrap1">
<div class="data">
<div class="scroll">
<table class="data">
	<tr>
		<th class="auto-style2b">&nbsp;</th>
		<th style="width: 195px" class="auto-style2">column a</th>
		<th style="width: 195px" class="auto-style2">column b</th>
		<th style="width: 195px" class="auto-style2">column c</th>
	</tr>
	<tr>
		<th style="height: 120px;" class="auto-style2b">c1</th>
		<td style="height: 120px; width: 195px;" class="auto-style2" id="cell01">
		123456789123456<br />
		</td>
		<td style="height: 120px; width: 195px;" class="auto-style2" id="cell02">
		123456789123456789</td>
		<td style="height: 120px; width: 195px;" class="auto-style2" id="cell03">
		123456789123456789123456</td>
	</tr>
	<tr>
		<th class="auto-style2b">c2</th>
		<td style="width: 195px" class="auto-style2" id="cell04">5855</td>
		<td style="width: 195px" class="auto-style2">&nbsp;</td>
		<td style="width: 195px" class="auto-style2">&nbsp;</td>
	</tr>
	<tr>
		<th class="auto-style2b">c3</th>
		<td style="width: 195px" class="auto-style2">&nbsp;</td>
		<td style="width: 195px" class="auto-style2">&nbsp;</td>
		<td style="width: 195px" class="auto-style2">&nbsp;</td>
	</tr>
</table>
</div>
</div>
</div>
</body>

</html>
...