CSS渐变效果

Question

我有一个div，它的背景是一张图片，在另一个div中有一些文字覆盖在上面。以下是HTML代码：

    .profilePic{
     width:190px;
     height: 190px;
     border-radius: 50%;
     background: #FFF;
     float: left;
     margin:12px;
     background: #ededed;
        background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
    }
    .profilePic:hover{
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        color:#FFF;
    }
    .name{
     font-family: Tahoma;
     font-size: 1.5em;
     color: red;
     margin-top: 42%;
     display: none;
    }
    .profilePic:hover .name {
        display:block;
    }

    <div class='profilePic one'>
     <center>
     <div class='name'>Name</div>
        </center>
    </div>

使用这段代码时，当我悬停在名为profilePic的div上时，该div上会应用一个过滤器。但我不希望文字被过滤，即不希望应用于名为name的div，只想应用于profilePic div中。我该怎么做？

- Gracy Mathew

Answer 1

您需要将文本与图片分离。

• 使用带有背景图像的内部div的容器div。
• 再使用另一个内部div来显示文本。
• 在容器悬停时应用所有效果。
• 不要使用百分比的margin-top，而是如果您想使文本居中，请在容器中添加position:relative;，并将其添加到文本中：
  • position: absolute; 来定位它。
  • top: 50%; 将其放置在左侧的50％处
  • left: 50%; 将其放置在顶部的50％处
  • transform: translate(-50%, -50%); 将其拉到其宽度和高度的50％处，向左和向上，因为例如，当您执行left: 50%:时，它会将元素的左边框放在50％，而不是其中心。 因此，您需要将其向左移动其适当宽度的50％，以使其相对于其父级水平居中。

    .profilePic{
        display: inline-block;
     width:190px;
     height: 190px;
     border-radius: 50%;
     background: #FFF;
     margin:12px;
     background: #ededed;
        background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
    }
    .profilePicContainer {
         position: relative;
         display: inline-block;
    }

    .profilePicContainer:hover .profilePic{
     -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        color:#FFF;
    }

    .profilePicContainer:hover .name { 
        display: block;
    }

    .name{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
     font-family: Tahoma;
     font-size: 1.5em;
     color: red;
     display: none;
    }

    <div class="profilePicContainer one">
     <div class="profilePic"></div>
     <div class="name">Name</div>
    </div>

- Alexis Vandepitte

---

建议在HTML中使用双引号(")而不是单引号(')。您可以在哪里阅读有关此建议的信息呢？ - Temani Afif

这只是一种惯例，可能因人而异，但在大多数情况下，我看到HTML使用双引号，而JS和PHP使用单引号。例如：<input value="i'm the value" />。 - Alexis Vandepitte

所以这不是一个建议 ;) 规范和建议是不同的，我猜...你的意思是使用单引号不好，这可能会给新开发人员带来困惑 [就我个人而言，我已经编写了一段时间的HTML/CSS/PHP/JS等代码，从未在书写时注意过引号，你只需要注意你在里面写什么即可]。 - Temani Afif

你说得对，单引号和双引号之间没有区别，我是这样学的，所以看到用单引号就感觉很奇怪。我会编辑我的回答并将其删除。谢谢你的评论。 - Alexis Vandepitte

Answer 2

您可以使用伪元素作为背景上方和文本下方的覆盖层，并对其应用CSS。这样做只会影响背景而不影响文本。

以下是一个示例，其中覆盖层还包含相同的背景图像，并在悬停时显示过滤器应用的效果：

.profilePic {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #FFF;
  float: left;
  text-align:center;
  margin: 12px;
  background: #ededed;
  position:relative;
  overflow:hidden;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
  transition:0.5s;
  filter:grayscale(100%);
  opacity:0;
}
.profilePic:hover::before {
  opacity:1;
}
.profilePic:hover {
  color: #fff
}

.name {
  font-family: Tahoma;
  font-size: 1.5em;
  color: red;
  margin-top: 42%;
  display: none;
  position:relative;
  z-index:1;
}

.profilePic:hover .name {
  display: block;
}

<div class='profilePic one'>
  <div class='name'>Name</div>
</div>

你也可以简单地使用带有不透明度的背景颜色：

.profilePic {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #FFF;
  float: left;
  text-align:center;
  margin: 12px;
  background: #ededed;
  position:relative;
  overflow:hidden;
  background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  transition:0.5s;
}
.profilePic:hover::before {
  background:rgba(0,0,0,0.7);
}
.profilePic:hover {
  color: #fff
}

.name {
  font-family: Tahoma;
  font-size: 1.5em;
  color: red;
  margin-top: 42%;
  display: none;
  position:relative;
  z-index:1;
}

.profilePic:hover .name {
  display: block;
}

<div class='profilePic one'>
  <div class='name'>Name</div>
</div>

- Temani Afif