我在使用简单的 CSS 动画时遇到问题，该动画适用于纯 HTML 文档，但不知何故不适用于我的 WordPress 博客。
这是带有 CSS 的纯 HTML 代码，显示了流畅的动画:
.loved-posts-container {
flex-grow: 1;
width: 100%;
}
.loved-posts-block {
padding-left: calc((100vw - 61.89rem) / 2);
padding-right: calc((100vw - 61.89rem) / 2);
max-width: 100vw;
position: relative;
}
.loved-posts-content {
margin: 0 auto;
position: relative;
}
.loved-posts-listing {
margin: -1.375rem;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.loved-posts-container .item {
width: calc(100% / 3);
padding: 1.375rem;
position: relative;
display: block;
box-sizing: border-box;
}
.loved-posts-container .img.wrap8 {
overflow: hidden;
display: block;
position: relative;
margin-bottom: 1.875rem;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.loved-posts-container .image {
background: red;
height: 346px;
display: block;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.loved-posts-container .overlay {
color: #000000;
background-color: #FFFFFF;
padding: 1.75rem;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: calc(100% - 2.25rem);
height: calc(100% - 2.25rem);
transform: translate(-50%,0);
bottom: 100%;
top: auto;
transition: transform .5s,bottom .5s;
transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
font-family: Lora Regular;
font-size: 0.5625rem;
letter-spacing: 0.25em;
word-spacing: 0em;
line-height: 1em;
text-transform: none;
font-weight: normal;
}
.loved-posts-container .item:hover .overlay {
transform: translate(-50%,50%);
bottom: 50%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ServiceFix</title>
<meta name="description" content="ServiceFix">
<meta name="author" content="ServiceFix">
</head>
<body>
<div class="loved-posts-container">
<div class="loved-posts-block">
<div class="loved-posts-content">
<div class="loved-posts-listing">
<a class="item" href="">
<span class="img-wrap">
<span class="image"></span>
<span class="overlay">READ THE STORY</span>
</span>
</a>
<a class="item" href="">
<span class="img-wrap">
<span class="image"></span>
<span class="overlay">READ THE STORY</span>
</span>
</a>
<a class="item" href="">
<span class="img-wrap">
<span class="image"></span>
<span class="overlay">READ THE STORY</span>
</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>但是，当我将此代码插入到我的 index.php 中并将 CSS 插入到我的 style.css 中时，它无法正常工作。白色 span 没有被红色 div 遮盖，它们仍然位于上方。您可以在底部看到:
你能告诉我我错过了什么吗？
最佳答案
添加这个，它应该可以工作。
.loved-posts-container .item {
overflow: hidden;
}
正如我所见，跨度只是在容器上平移。在您的示例中，白框也应该在那里。
如果给parent一个margin-,padding-top或者在上面添加其他内容，<span class="overlay">READ THE STORY</span>应该重新出现。
如果你想隐藏你必须添加的东西 overflow:hidden;
关于html - div 中的 "Masking"跨度适用于纯 HTML 但不适用于 wordpress，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55182810/