Question

我在css文件中有以下功能。

#portfolio .portfolio-box .portfolio-box-caption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
 opacity: 0;
  background: rgba(13, 13, 13, 0.1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

我已将rgba函数的参数值更改为：

background: rgba(255, 255, 132, 0.1);

但我的浏览器中看不到更改。我还删除了缓存的浏览器数据，但没有得到任何结果。

请帮助我！提前谢谢。

Answer 1

我认为问题在于您将属性不透明度设置为零。尝试删除行'opacity：0'或将其更改为更高的值。

Answer 2

尝试在Chrome中打开开发者工具，然后在网络标签上停用您网站的缓存。

Answer 3

您应该实现资产的指纹识别（CSS，JS，甚至是图像，以防您经常更改它们）。只要您在本地主机上进行开发，缓存和清除缓存很容易，但只要您获得实时用户，就无法使它们成为清除缓存并且是传播资产更改的唯一方法（CSS，JS，所有用户的图像，字体）都是通过指纹识别。完全取决于你的构建过程和整个堆栈。从本质上讲，指纹识别只是为您的资产链接添加了一个版本查询。例如，你的CSS样式不会被链接为style.css，但它会被链接为style.css？v = 1然后在下一次更改时，v = 2等等。或者它可能有一个基于的随机查询最后更改时间戳或其他方式。

Answer 4

将不透明度从0更改为0.5：

opacity: 0.5;

将rgba中的“a”从0.1更改为0.8

background: rgba(13, 255, 13, 0.8);

或者禁用Chrome缓存就像在这里解释一样Disabling Chrome cache for website development

CSS文件更改不会反映在浏览器中

4 个答案: