Fatal编程技术网
  • html/
  • Html div上的背景图像不是'；t显示；而div正在崩溃

Html div上的背景图像不是'；t显示；而div正在崩溃

html css

Html div上的背景图像不是'；t显示；而div正在崩溃,html,css,background-image,Html,Css,Background Image,CSS: HTML: 尼娜·拉科维奇 我的网站显示背景，只有，为什么其他两个和没有显示在我的网站上？ 我不知道怎么解决这个问题，请帮帮我。。还有一个问题，我想用我网站上的eng和slo作为两张图片，如果你点击它们，它们就是链接。但是我不能在a内部使用div，我该怎么做？图像不工作，因为.slo和.eng没有高度或内容，所以它们和它们的背景图像不会出现。给他们两个一个高度： <!DOCTYPE HTML> <html> <head>

CSS:

HTML:


尼娜·拉科维奇
我的网站显示背景，只有
，为什么其他两个
和
没有显示在我的网站上？
我不知道怎么解决这个问题，请帮帮我。。还有一个问题，我想用我网站上的
eng
和
slo
作为两张图片，如果你点击它们，它们就是链接。但是我不能在
a
内部使用
div
，我该怎么做？

图像不工作，因为
.slo
和
.eng
没有高度或内容，所以它们和它们的背景图像不会出现。给他们两个一个高度：

<!DOCTYPE HTML>
<html>

    <head>

        <!-- META -->
        <title>Nina Rakovec</title>
        <meta name="description" content="Profesionalna igralka" />

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" href="/favicon.ico" />

    </head>

    <body>

            <div class="image"></div>
            <div class="eng"></div>
            <div class="slo"></div>

    </body>

</html>
对于第二个问题，您可以使用
或者使用
元素显示图像

图像无法工作，因为
.slo
和
.eng
没有高度或内容，因此它们及其背景图像不会显示。给他们两个一个高度：

<!DOCTYPE HTML>
<html>

    <head>

        <!-- META -->
        <title>Nina Rakovec</title>
        <meta name="description" content="Profesionalna igralka" />

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" href="/favicon.ico" />

    </head>

    <body>

            <div class="image"></div>
            <div class="eng"></div>
            <div class="slo"></div>

    </body>

</html>
对于第二个问题，您可以使用
或者使用
元素显示图像

好的，给你

不要在图像链接的锚点中包装div或span，而只使用锚点，例如

<a href="#" class="eng"></a>
<a href="#" class="slo"></a>
好的，给你

不要在图像链接的锚点中包装div或span，而只使用锚点，例如

<a href="#" class="eng"></a>
<a href="#" class="slo"></a>
当你说“不能在一个文件中使用div”是因为一个真正的限制，还是仅仅因为你读到的东西？HTML4和早期版本不允许锚元素包装块级元素，如
，但从HTML5开始（根据您的DOCTYPE，您正在使用它），锚元素（
）可以包装大多数其他元素

如果您确实不能使用锚元素，那么可以使用JavaScript来处理div上的单击事件。（出于可访问性的原因，不建议这样做，但它应该可以工作。）

当你说“不能在一个文件中使用div”是因为一个真正的限制，还是仅仅因为你读到的东西？HTML4和早期版本不允许锚元素包装块级元素，如
，但从HTML5开始（根据您的DOCTYPE，您正在使用它），锚元素（
）可以包装大多数其他元素

如果您确实不能使用锚元素，那么可以使用JavaScript来处理div上的单击事件。（出于可访问性的原因，不建议这样做，但它应该可以工作。）

为
.slo
&
.eng
添加一些高度，并对链接使用span，但也可以将
背景图像设置为不带div和span的锚点。为
.slo
&
.eng
添加一些高度，并对链接使用span，但也可以将
背景图像设置为不带div和span的锚点。我知道这是正确的HTML5是允许的，但我想让我的网站与其他浏览器兼容，特别是IE，它的局限性是众所周知的。谢谢你的回答，我很感激。事实上，很长一段时间以来，所有浏览器都支持围绕块级元素包装锚。请看：。我知道这在HTML5中是允许的，但我想让我的网站与其他浏览器兼容，特别是IE，它的局限性是众所周知的。谢谢你的回答，我很感激。事实上，很长一段时间以来，所有浏览器都支持围绕块级元素包装锚。谢谢你的回答，这对我很有帮助！我不知道我必须设定高度。所以，如果我想将其与背景图像结合使用，我必须简单地设置高度——我只能这样做，还是应该设置宽度？我不熟悉CSS和HTML，所以我有很多东西要学。：）@NejcPisk必须具有高度、宽度或内容。很高兴我能帮忙！谢谢你的回答，这对我很有帮助！我不知道我必须设定高度。所以，如果我想将其与背景图像结合使用，我必须简单地设置高度——我只能这样做，还是应该设置宽度？我不熟悉CSS和HTML，所以我有很多东西要学。：）@NejcPisk必须具有高度、宽度或内容。很高兴我能帮忙！非常感谢，帮了我这么多，我很感激。非常感谢，帮了我这么多，我很感激。

<a href="#" class="eng"></a>
<a href="#" class="slo"></a>



.slo,
.eng {
  background-repeat:no-repeat;
  position:absolute;
  display: block;
  width:5%;
  height:2%; /* You forgot to set height */
  bottom:10%;
}
.slo {
  background-image:url("slo.png");
  right:21%;
}
.eng {
  background-image:url("eng.png");
  right:12%;
}



// With jQuery
jQuery('.slo').click(function () {
  window.location = 'new-url';
});

// Without jQuery
document.querySelector('.slo').attachEventListener('click', function () {
  window.location = 'new-url';
}, false);