css 只羽化div的一侧，只模糊左侧和右侧

qco9c6ql 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(151)

我有一个图像列表要滚动。我希望包含图像div容器的div的左侧和右侧变得模糊，并且只有一个图像可见，但一侧显示模糊。我的代码如下：

.img-tokry {
  width: 500px;
  /* flex-wrap: wrap;
  flex-direction: row; */
  padding: 2em 0;
  margin: 0 auto;
  gap: 2em;
  overflow-x: scroll;
  justify-content: space-between;
}

.nft-img {
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
  /* object-fit: fill; */
  border: 2px solid var(--cl-1--);
  box-shadow: 5px 5px 20px var(--cl-8--);
  border-radius: 15%;
  /* margin: 16px; */
}

.nft-img:hover {
  transform: scale(1.3);
  border-color: var(--cl-2--);
  box-shadow: none;
  margin: 5px 20px;
  transition: 0.3s ease-in-out;
}

<div class="img-tokry row">
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
  <div class="imgs">
    <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
  </div>
</div>

没有什么是我所期望的，因为我不知道如何模糊双方，我甚至没有找到任何模糊选项在互联网上。
请告诉我定义div模糊的属性，以及css中所有的子div等，然后我可以为每一面设置一个单独的模糊，我的问题就解决了。

- 我不想在两侧框阴影，我想模糊和逐渐不透明度为零的左侧和右侧。**

css

来源：https://stackoverflow.com/questions/74841103/feather-only-side-of-a-div-and-blur-on-only-left-and-right-side

1条答案

按热度按时间

uplii1fm1#

如果我理解正确，您可以像下面这样使用filter

.img-tokry {
  width: 500px;
  /* flex-wrap: wrap;
  flex-direction: row; */
  padding: 2em 0;
  margin: 0 auto;
  gap: 2em;
  overflow-x: scroll;
  justify-content: space-between;
}

.nft-img {
  min-width: 100px;
  min-height: 100px;
  max-width: 200px;
  max-height: 200px;
  /* object-fit: fill; */
  border: 2px solid var(--cl-1--);
  box-shadow: 5px 5px 20px var(--cl-8--);
  border-radius: 15%;
  /* margin: 16px; */
}

.nft-img:hover {
  transform: scale(1.3);
  border-color: var(--cl-2--);
  box-shadow: none;
  margin: 5px 20px;
}

.imgs {
  filter: blur(1px);
  margin-bottom: 10px;
  transition: 0.s all !important;
}
.imgs:hover {
  filter: blur(0);
}

<div class="img-tokry row">
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
        <div class="imgs">
          <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
        </div>
      </div>

赞(0）回复(0）举报 2022-12-20

我来回答

css 只羽化div的一侧，只模糊左侧和右侧

1条答案

相关问题

热门标签

最新问答