div上的背景图片没有显示; divs正在崩溃 [英] background-image on divs aren't showing; the divs are collapsing instead
问题描述
CSS：
body {
background：url（ninabg.jpg）left top no-repeat ;
背景大小：100％自动;
}
.image {
background-repeat：no-repeat;
background-image：url（logo2fix.png）;
位置：绝对;
右侧：1％;
底部：3％;
身高：40％;
宽度：35％;
}
.slo {
background-repeat：no-repeat;
background-image：url（slo.png）;
位置：绝对;
宽度：5％;
底部：10％;
右：21％;
}
.eng {
background-repeat：no-repeat;
background-image：url（eng.png）;
位置：绝对;
宽度：5％;
右：12％;
底部：10％;
}
HTML：
<！DOCTYPE HTML>
< html>
< head>
<！ - META - >
< title> Nina Rakovec< / title>
< meta name =descriptioncontent =Profesionalna igralka/>
<！ - CSS - >
< link rel =stylesheettype =text / csshref =style.css>
< link rel =快捷图标href =/ favicon.ico/>
< / head>
< body>
< div class =image>< / div>
< div class =eng>< / div>
< div class =slo>< / div>
< / body>
< / html>
我的网站显示的是背景，只显示< div class =图片>< / div> ，为什么其他两个< div class =eng>< / div> 和< div class =slo>< / div> 显示在我的网站上？
我很笨，不知道如何解决这个问题，请帮助我..另一个问题，我想使用 eng 和 slo 在我的网站上显示为两张图片，如果点击它们，这些图片就是链接。但是我不能在 a 中使用 div ，我该怎么做？
code>没有高度或内容，所以他们和他们的背景图像不会出现。给他们两个身高：
.slo {
背景重复：不重复;
background-image：url（slo.png）;
位置：绝对;
宽度：5％;
底部：10％;
右：21％;
height：200px;
display：block
}
.eng {
background-repeat：no-repeat;
background-image：url（eng.png）;
位置：绝对;
宽度：5％;
右：12％;
底部：10％;
height：200px;
display：block;
}
对于第二个问题，您可以使用< a> 元素，而不是< div> ：
< a href =＃class =eng>< / a>
< a href =＃class =slo>< / a>
或者使用< img> 元素显示图像。
JSFiddle演示
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?
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
这篇关于div上的背景图片没有显示; divs正在崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
