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。我该怎么办？

Answer 1

您需要将文字与图片分开。

使用带有div的容器div，其中包含带有background-image的图像。
使用另一个div来显示文字
将所有效果应用于容器悬停
请勿在百分比中使用margin-top，而是如果要将文本居中，请将position:relative;添加到容器中，然后添加到文本中：
- position: absolute;定位它。
- top: 50%;将其置于左侧的50％
- left: 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>

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>

CSS渐变效果

2 个答案: