`JSFiddle Demo`

Question

CSS：

body {
  background: url("ninabg.jpg") left top no-repeat;
  background-size: 100% auto;
}

.image {
    background-repeat:no-repeat;
    background-image:url("logo2fix.png");
    position:absolute;
    right:1%;
    bottom:3%;
    height:40%;
    width:35%;
}

.slo {
    background-repeat:no-repeat;
    background-image:url("slo.png");
    position:absolute;
    width:5%;
    bottom:10%;
    right:21%;

}

.eng {
    background-repeat:no-repeat;
    background-image: url("eng.png");
    position:absolute;
    width:5%;
    right:12%;
    bottom:10%;
}

HTML：

<!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 class="image"></div>，为什么我的网站上显示的是另外两个<div class="eng"></div>和<div class="slo"></div>？我很无能，也不知道如何解决这个问题，请帮助我..还有一个问题，我想在我的网站上使用eng和slo作为两张图片，如果点击则链接在他们。但我无法在div内使用a，我该怎么做？

Answer 1

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

.slo {
    background-repeat:no-repeat;
    background-image:url("slo.png");
    position:absolute;
    width:5%;
    bottom:10%;
    right:21%;
    height:200px;
    display:block
}

.eng {
    background-repeat:no-repeat;
    background-image: url("eng.png");
    position:absolute;
    width:5%;
    right:12%;
    bottom:10%;
    height:200px;
    display:block;
}

对于您的第二个问题，您可以使用<a>元素而不是<div>：

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

或使用<img>元素显示图像。

`JSFiddle Demo`

Answer 2

好的，这是，

而不是在图像链接的锚点中包含div或spans只使用锚点，例如

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

如果您使用带有背景图片的元素，则必须同时设置width＆amp;如果元素不是默认块或内联块级元素，则height和display属性为block或inline-block。

.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%;
}

Answer 3

当你说你＆＃34;不能在＆＃34;内使用div？是因为真正的限制还是只是你读过的东西？ HTML4和更早版本不允许锚点包装像<div>这样的块级元素，但是从HTML5开始（基于你的DOCTYPE使用），锚元素（<a>）被允许包装最多其他元素。

如果您真的无法使用锚元素，则可以使用JavaScript来处理div上的点击事件。（出于可访问性原因，不建议这样做，但它应该有效。）

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

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

div上的背景图像没有显示; div正在崩溃

3 个答案:

`JSFiddle Demo`