Question

如何使渐变出现在图片的顶部，并且链接可以同时单击？

滚动时，渐变必须保持粘性。有可能这样做吗？当前，滚动条无法正常工作。

.container{
  position: relative;
}
.image-dog {
  width:200px;
  height:100px;
}
a:hover{
  cursor:pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
  position: absolute;
  z-index: 100;
}

<div class="container">
  <div class="directory">
    <div class="gradient">
    </div>
    <div class="owner">
    	<a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
	    <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
	    <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
	    <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
    </div>
    
  </div>
</div>

Answer 1

<style> 
.container{
  position: relative;
  top: -20px;
}
.image-dog {
  width:200px;
  height:100px;
}
a:hover{
  cursor:pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
    position: sticky;
    z-index: 999;
}

</style>

 <div class="gradient">
            </div>
        <div class="container">
                <div class="directory">

                  <div class="owner">
                      <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                  </div>

                </div>
              </div>

Answer 2

只需将pointer-events: none;应用于您的渐变即可使其“点击”：

.container {
  position: relative;
}

.image-dog {
  width: 200px;
  height: 100px;
}

a:hover {
  cursor: pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
  position: absolute;
  z-index: 100;
  pointer-events: none;
}

<div class="container">
  <div class="directory">
    <div class="gradient">
    </div>
    <div class="owner">
      <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
    </div>

  </div>
</div>

当链接位于<div>后面时如何使它们可单击

2 个答案: