加载了背景图像的图像未显示 [英] image loaded with background-image doesn't show up
问题描述
我真的很困惑，我试图创建一个带有图标和一些按钮的登录页面，但是我无法使正在使用的背景图像显示出来，即使它是根据Chrome浏览器的开发套件
I'm really confused, I'm trying to create a landing page with an icon and some buttons, but I can't manage to make the background image I'm using show up, even if it's loaded according to Chrome's development kit
我只有这些行:
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="row">
<div class="tryhard">
</div>
</div>
<!-- Chargement des scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
style.css
.tryhard{
background: url(../img/guitare.jpg) no-repeat center center;
margin:0;
padding:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这足以使我的图片显示出来，但它并没有显示在我的任何浏览器中，虽然我可以看到它在其他网站上也可以正常工作... 我的图像权重为924 ko，其尺寸为2304x1536像素...
This should be enough to make my image appear, but it doesn't show up on any of my browsers, while I can see it working on other websites... My image weights 924 ko, and its dimensions are 2304x1536 pixels...
有人有主意吗?
谢谢
推荐答案
由于我的声誉不足以发表评论，因此将其张贴在这里.
Since I don't have reputation enough to comment, I'll post it here.
.row {
height: <define height here>;
}
height: 100%;
高度:100％将使其与父元素的高度相同，即行".
The height: 100% will make it the same height of it's parent element, which is 'row'.
欢呼
这篇关于加载了背景图像的图像未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
