Question

我希望将非常暗的淡入淡出覆盖图像，显示一些文本，并提供链接到另一个站点的按钮。我认为后者（显示文本和添加按钮）非常简单。但是，我真的不知道从哪里开始使用CSS来有效地在悬停时出现这种“暗淡淡出”。任何人都可以帮我用CSS做这个吗？下面是我现在拥有的HTML和CSS。这是非常基本的。正如我所提到的，我尝试了一些东西，但没有一个接近。

HTML：

<div class = "CoverPhoto">
<img src="Facebook%20Cover.png">
</div>

CSS：

.CoverPhoto{position: Absolute; top: 12%; Left 15%;}

下一步是什么？再一次，对这个问题的任何见解都会非常有用。

感谢。

Answer 1

您可以在悬停时在容器上创建pseudo element，其背景为background:rgba(0,0,0,0.7)，这会使图像变暗，我们只需使用全宽并使用{{1}正确定位}。至于文本和按钮，我们做同样的事情，我们只需要确保它的包装器是容器的子容器。

（我添加了一些效果，因此文字从左侧以position:absolute淡入）

Here就是它完成后的样子。

HTML：

transform

CSS：

<div class = "CoverPhoto">

  <img src="http://lorempixel.com/300/300/">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore culpa, molestiae ducimus magni blanditiis nemo deserunt totam quo iste. At?</p>
    <button>Click me!</button>
  </div>
</div>

Answer 2

我不太确定你在问什么但是，我想你想让鼠标悬停时按钮看起来更暗，

在我看来，这样做的简单方法是创建图像，使其有2个图像，假设Facebook徽标为200px×200px，您可以创建的图像为400px×200px，其中高度为200px包含带有黑色覆盖层的徽标。比悬停会显示更黑暗的一面。像这样：

HTML

<div class="image"></div>

的CSS

.image { 
background-image:url{image.gif}
width:200px
height:200px
} 

.image:hover{
background-position:0 -200px;
}

我希望这可能有助于我用我的iphone写的，对不起，

在悬停图像时难以开始创建暗淡淡出

2 个答案: