如何改变GradientPaint的方向？(How to change the direction of a GradientPaint?)

 如果我理解正确，给position:relative对于容器/ wrap div和pointer-events:none包含你可以实现的文本的元素 
 
 片段 
 
 
 
 
 
  
body {
  margin: 0 /* demo */
}
.wrap {
  position: relative;
}
img {
  width: 108px;
  height: 32px;
  z-index: -1;
  position: relative
}
a:hover img {
  opacity: .5  /* demo */
}
span {
  position: absolute;
  left: 0;
  pointer-events: none;
  display: inline-block; /* demo */
  background: red /* demo */
}
 
  
<div class="wrap">
  <a href="#">
    <img src="//lorempixel.com/1600/900">
  </a>
  <span>some text</span>
</div>
 
 
 
 

I rearranged the website layout to use a clickable div instead of an image, and now it works on click even if text is over it. I then put it in a nested div which is the size of the entire window, so the links never get misaligned based on window size:
 
HTML:
 
<div id="bodyDiv">
   <div class="secret" style="position:relative; top:770px; left:1168px; width:108px; height:32px; background-color:black;" onclick="location.href='/aboutme/vision.html'"></div>
</div>
 
CSS:
 
#bodyDiv {
        background-image: url("homebackgroundsmall.png");
        background-repeat: no-repeat;
        background-position: center;
        height: 1200px;
        width: 1684px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -842px;
      }
 
The downside to this is that there is no mouse change on hover, making the secrets overly hidden. To personally fix this to make it more obvious, I made the .secret class so on hover the background portion of the div fades out by increasing the background opacity to 1 (which is black):
 
CSS:
 
.secret {
        opacity: 0;
        transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -webkit-transition: opacity 1s ease-in-out;
      }
.secret:hover {
        opacity: 1;
      }