我有一个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。我该怎么办?
答案 0 :(得分:1)
您需要将文字与图片分开。
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>
答案 1 :(得分:0)
您可以将伪元素用作背景上方和文本下方的叠加层,并在其上应用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>