With the book’s code loaded in Dreamweaver CS5 and viewed in
Opera 11.11, the bg-bike.png in “ad2” in the tertiary div does
not roll off the page as it does in all the other browsers.
Instead, when my cursor moves over it, it just disappears.
Here’s the relative code that I have loaded in Dreamweaver:
#ad2 {
height: 170px;
background-image:
url(…/images/bg-bike.png),
url(…/images/gradient.svg);
/* Mozilla gradient syntax /
background-image:
url(…/images/bg-bike.png),
-moz-linear-gradient(0% 0% 270deg,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/ W3C gradient syntax for WebKit /
background-image:
url(…/images/bg-bike.png),
-webkit-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/ W3C gradient syntax for Opera /
background-image:
url(…/images/bg-bike.png),
-o-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/ Unprefixed W3C syntax /
background-image:
url(…/images/bg-bike.png),
linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/ Old WebKit syntax */
background-image:
url(…/images/bg-bike.png),
-webkit-gradient(linear,
from(rgba(0,0,0,0.4)),
color-stop(37%, rgba(0,0,0,0)),
color-stop(83%, rgba(0,0,0,0)),
color-stop(92%, rgba(0,0,0,0.16)),
color-stop(98%, rgba(0,0,0,0)));
background-position: 50% 88%, 0 0;
-webkit-transition: background-position 1s linear 250ms;
-moz-transition: background-position 1s linear 250ms;
-o-transition: background-position 1s linear 250ms;
transition: background-position 1s linear 250ms;
}
Is there a problem with what I have copied? Or is it a problem
with Opera? Is this happening to anyone else?
Thanks for the feedback.