Question

我在图像上有一个简单的文本叠加，使过程中的背景变暗。我将transition与ease-in-out一起使用，但它似乎没有得到适当的缓解。

我知道ease-in-out应该应用于事物本身，而不是它的伪:hover，但它似乎并不想工作。我尝试了很多方法，移动它，删除东西，添加东西，但似乎没有任何意义。我注意到文字确实很容易，但background rgba不透明度并没有合作。它只是快速回复:(

请参阅http://g4stly.com/staff.html的实时版本，了解我正在谈论的内容，具体而言。

提前致谢！

我的代码如下：

＆＃13;

#g4stly
			{
			background-image: url('http://g4stly.com/images/users/g4stly.jpg');
			}

.textFrame
			{
			text-align: center;
			font-size: 20px;
			color: #DDAA49;
			text-decoration: none;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 30%;
			width: 250px;
			height: 250px;
			}
			
.textFrame p
			{
			opacity: 0;
			height: 75%;
			margin: 0;
			border-radius: 30%;
  		transition: opacity 300ms ease-in-out;
			}
			
.textFrame p a
			{
			text-decoration: none;
			color: #976649;
			font-size: 25px;
			}
			
.textFrame:hover p
			{
			opacity: 1;
			background: rgba(0,0,0,0.8);
			}
			
.textFrame p:first-child
			{
			padding: 25% 0 0 0;
			}

＆＃13;

<div id="g4stly" class="textFrame textFrameLeft">
		<p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br>
		Owner of everything g4stly related<br>
		Basically, the boss.</p>
	</div>

＆＃13;

Answer 1

我注意到你更新了代码。看起来你的问题已经解决了。

.textFrame p仅对opacity应用转换，因此您无法看到背景转换。我为你添加了background ....种子，你也可以这样做：

transition: all 1000ms ease-in-out;

另一种选择是将rgba背景移到.textFrame p内，这样背景就不会突然消失，随着元素的其余部分逐渐淡出。

希望这有助于您了解原因：）

Answer 2

你有一个逗号应该有分号。

<Canvas>
    <Line X1="{Binding Connection.FirstElementCoordinate.X}"
          Y1="{Binding Connection.FirstElementCoordinate.Y}"
          X2="{Binding Connection.SecondElementCoordinate.X}"
          Y2="{Binding Connection.SecondElementCoordinate.Y}"
          Stroke="Black" StrokeThickness="5"/>
    <Path Fill="Black">
        <Path.Data>
            <EllipseGeometry Center="{Binding Connection.FirstElementCoordinate}"
                             RadiusX="5" RadiusY="5"/>
        </Path.Data>
    </Path>
    <Path Fill="Black">
        <Path.Data>
            <EllipseGeometry Center="{Binding Connection.SecondElementCoordinate}"
                             RadiusX="5" RadiusY="5"/>
        </Path.Data>
    </Path>
</Canvas>

＆＃13;

transition: background 1000ms ease-in-out;

＆＃13;

#g4stly {
  background-image: url('http://g4stly.com/images/users/g4stly.jpg');
}

.textFrame {
  text-align: center;
  font-size: 20px;
  color: #DDAA49;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 30%;
  width: 250px;
  height: 250px;
}

.textFrame p {
  opacity: 0;
  height: 75%;
  margin: 0;
  border-radius: 30%;
  transition: background 1000ms ease-in-out;
  transition: opacity 1000ms ease-in-out;
}

.textFrame p a {
  text-decoration: none;
  color: #976649;
  font-size: 25px;
}

.textFrame:hover p {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

.textFrame p:first-child {
  padding: 25% 0 0 0;
}

＆＃13;

CSS过渡的轻松进入似乎并不奏效

2 个答案: