Question

我正在尝试创建一个投资组合网站。我不太擅长css，我从别人的代码中学到了他们的设计和特殊效果。

这是我到目前为止所取得的成就，我有一个小画廊可以存储我的照片，并在单击它时使用照片放大器将其放大。通常，当未悬停或单击鼠标时，照片会用filter: grayscale(50%) contrast(1);降低饱和度；悬停时，饱和度会恢复正常，并且照片下方会出现阴影。

这里是演示：https://codesandbox.io/s/objective-swartz-tuo1t

相关的代码段是

const Avatar = styled(SingleSource)`
  position: relative;
  mix-blend-mode: multiply;
  filter: grayscale(50%) contrast(1);
  transition: ${theme.transition};
`;

const AvatarContainer = styled.a`
  box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
  transition: ${theme.transition};

  &:hover,
  &:focus {
    box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
  }
  width: 100%;
  background: transparent;
  position: relative;
  margin-left: -20px;
  &:hover,
  &:focus {
    background: transparent;
    ${Avatar} {
      filter: none;
      mix-blend-mode: normal;
    }
  }

< SingleSource />是每张照片的放大组件。

但是现在有几个问题。

完全不应用去饱和作用。照片的饱和度一直都是正常的。

每张照片（相框的种类）周围都有白色填充。我相信这与我应用的阴影样式有关。具体来说，此代码段

  box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
  transition: ${theme.transition};

  &:hover,
  &:focus {
    box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
  }

单击图片容器时，该区域周围有一个蓝色边框。我该如何删除它。

Answer 1

根据您的代码段，这应该为您解决轮廓问题。在components/jobs.js中，将TabContent的定义更新为：

const TabContent = styled.div`
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: ${props => (props.isActive ? 1 : 0)};
  z-index: ${props => (props.isActive ? 2 : -1)};
  position: ${props => (props.isActive ? "relative" : "absolute")};
  visibility: ${props => (props.isActive ? "visible" : "hidden")};
  transition: ${theme.transition};
  transition-duration: ${props => (props.isActive ? "0.5s" : "0s")};
  &:focus-within { // <--------- this is what was added
    outline: none;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: ${fontSizes.large};
    li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      &:before {
        content: "▹";
        position: absolute;
        left: 0;
        color: ${colors.green};
        line-height: ${fontSizes.xlarge};
      }
    }
  }
`;

如何使用样式化组件

1 个答案: