问题

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>

My website shows the background and only the <div class="image"></div>, why aren't the other two <div class="eng"></div> and <div class="slo"></div> showing up on my website? I am clueless and have no idea how to fix this, please help me.. also another question, I would like to use the eng and slo on my website as two pictures which are links if you click on them. But I can't use div inside of a, how would I do that?

回答1:

The images are not working because .slo and .eng have no height or content so they, and their background-images, do not appear. Give them both a height:

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

And for your second problem, you can just use an <a> element instead of a <div>:

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

Or use a <img> element to display the images.

`JSFiddle Demo`

回答2:

Ok, here it is,

instead of wrapping divs or spans in anchor for image links use just anchors e.g.

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

if you using element with background image you must set both width & height and display property to block or inline-block if element is not by default block or inline block level element.

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

回答3:

When you say you "can't use div inside of a" is that because of a real limitation or just something you read? HTML4 and earlier did not allow anchors to wrap block-level elements like <div>, but as of HTML5 (which you are using, based on your DOCTYPE), anchor elements (<a>) are allowed to wrap most other elements.

If you truly can't use an anchor element, you can use JavaScript to handle click events on the div instead. (This is not recommended for accessibility reasons, but it should work.)

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

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

来源：https://stackoverflow.com/questions/24917247/background-image-on-divs-arent-showing-the-divs-are-collapsing-instead

标签

html