CSS渐变效果

时间:2018-01-08 12:19:17

标签: html css

我有一个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。我该怎么办?

2 个答案:

答案 0 :(得分:1)

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

  • 使用带有div的容器div,其中包含带有background-image的图像。
  • 使用另一个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>

答案 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>