自定义 CSS 在 WordPress 中无法正常工作答案

【问题标题】：Custom CSS does not work correctly in WordPress自定义 CSS 在 WordPress 中无法正常工作
【发布时间】：2017-03-25 11:07:58
【问题描述】：

我为我的 WP 页面创建了一个自定义部分。你可以在这里找到 CSS 和 HTML：http://www.cssdesk.com/J469A

当你将鼠标悬停在图片上时，你会看到它会被我的代码中的半透明背景所取代。

但是，当我将代码插入到我的 WordPress 网站时，它不能以这种方式工作。悬停时，透明背景仅覆盖文本所占据的区域，而不是应有的整个图片。

你可以看看这里：http://www.sflsupport.org/programs/这是最后一节（网络研讨会存档）

我该如何解决这个问题？

【问题讨论】：

标签： html css wordpress hover

【解决方案1】：

请更换

span.text-content{
 display: table;
 ...
}

与

span.text-content{
 display: block;
 ...
}

【讨论】：

非常感谢。我改变了这个，但不幸的是，它不起作用。
不，您可以查看页面sflsupport.org/programs 。如果您缩小浏览器的大小，您会看到该部分的内容不会留在框内。它应该在里面。 @sasikumar
添加溢出-y: auto;

【解决方案2】：

我认为问题出在display:table，应该是display:block

试试下面更新的 CSS

span.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  /* display: table; updated to display:block below */
  display:block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

【讨论】：

非常感谢。我改变了这个，但不幸的是，它不起作用。
我检查了您的网站，它似乎工作正常。请仔细检查您的网站
FF 和 Chrome 都运行良好，让我知道你在检查哪个浏览器
非常感谢您的检查。但是，当您缩小浏览器的大小时，您会看到内容并没有留在框内。（我使用 Chrome 和 Mozilla）。 @sanjeevk
您必须使字体大小响应，使用媒体查询可以减小字体大小，或在 vw 中使用字体大小，请查看此链接以获取响应字体大小：css-tricks.com/viewport-sized-typography