Home / Questions / 12964
Accepted
Marc Lemien
Asked: 2020-06-07 01:09:49 +0800 CST 2020-06-07 01:09:49 +0800 CST

带有背景图像的 css 属性错误：url

  • 772

这段代码是在我问的另一个问题中提供给我的。代码完全符合我的要求，即当我将鼠标悬停在它上面时，它会显示一个 iframe。但是当我把它放在我用Adob​​e Muse制作的网站上时，代码会显示错误。我附上了一张图片，显示了我提供的代码下方的错误。 css和html代码

框中的代码

错误图像

html

2 Answers

  1. Best Answer

    在 CSS 中，样式被应用到页面上的所有链接，所以它只影响你想要的链接，你必须给它一个类。

    HTML

    <a href="PAGINA_A_LA_QUE_QUIERES_IR" class="gastro_ranking">
  <iframe src="http://lorempixel.com/300/300/people"></iframe>
</a>

    CSS

    a.gastro_ranking{
    display:inline-block;
    width:142px;
    height:29px;
    background-image:url(ruta de imagen)
}
    • 3

  2. 似乎 CSS 中存在冲突，尽管您iframe在正常状态下隐藏了，但它正在显示。这可能是因为有一个比您定义的更具体的 CSS 规则。

    您可以用鼠标右键单击它iframe并检查元素。然后，您将能够看到应用于（或不应用于）该元素的样式，并创建比您上面的规则更具体的规则。

    另一种可能的解决方案是使用!important并使您的样式比其他样式具有更高的优先级。虽然可能不是最推荐的，因为它会使代码在一段时间后更难以维护，如果其他样式也有!important，那么不会有任何变化。

    代码如下所示：

    a {
  display:inline-block;
  width:300px;
  height:300px;
  background-image:url(http://lorempixel.com/300/300/cats);
}

a > iframe {
  display:none !important;
  width:300px;
  height:300px;
  margin:0;
  padding:0;
  border:0;
}

a:hover > iframe {
  display:block !important;
}
    <a href="PAGINA_A_LA_QUE_QUIERES_IR">
  <iframe src="http://lorempixel.com/300/300/people"></iframe>
</a>

    • 1