Question

我真的很困惑，我正在尝试创建一个带有图标和一些按钮的登录页面，但我无法设法使用我正在使用的背景图像，即使它是根据Chrome的加载开发套件

我只有这些行：

的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像素......

有没有人有想法？

谢谢

Answer 1

tryhard div缺少尺寸（宽度，高度）。设置一些高度和宽度值或添加一些内容（目前它是一个没有填充的空div，所以它是0 x 0），你会看到你的背景图像

Answer 2

由于我的声誉不足以发表评论，我会在此发布。

Jsfiddle

.row {
  height: <define height here>;
}

height: 100%;

高度：100％将使其与父元素的高度相同，即'row'。

干杯

装有背景图像的图像不会显示

2 个答案: