背景-图像在div元素中不起作用
不要在div中使用类nav-item工作background-image。所有映像都在同一个目录中。页眉工作中的背景。有了img src一切都很好。问题出在哪里？
我什么都试过了。
null
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
<a href="#contacts" class="logo-contacts"> </a>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>null
共有2个答案
问题是您的div是空的--所以--它没有高度。尝试向CSS类添加高度：
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
height: XXXpx;
}
您应该为background-image提供有关位置的更多信息。
例如：
.nav-item {
width: 12%;
background-image: url('frame.png');
background-position: center; /* Added */
background-size: cover; /* Added */
background-repeat: no-repeat; /* Added */
margin-top: 80px;
margin-left: 140px;
}
有关background属性的详细信息，请访问Mozilla Developer Network。
-
问题内容： 我正在尝试通过使用angular将背景图像应用于div （我之前尝试过使用具有相同行为的自定义指令），但是它似乎没有用。 不过，如果我尝试使用背景色，则效果似乎很好。我也尝试了远程源和本地源，但都没有用。 问题答案： 正确的语法是： ng-style的正确语法是：
-
问题内容： 是否可以将div中的背景图像居中放置？我已经尝试了几乎所有内容-但没有成功： 这可能吗？ 问题答案：
-
问题内容： 我在以下div中有一个背景图片，但是该图片被截断了： 有没有一种方法可以显示背景图像而不将其剪切掉？ 问题答案： 您可以使用])属性来实现此目的，大多数浏览器现在都支持该属性。 缩放背景图像以适合div： 要缩放背景图像以覆盖整个div：
-
我想让我的登录活动与背景关闭整个活动，包括手机本身的时钟像这样 这是我的密码 但我的输出是 我需要删除橙色条，使其与第一个图像相同。 我如何按照这种风格制作：
-
问题内容： 是否可以为SVG 元素设置a ？ 例如，如果设置了element ，则CSS样式有效，但都不起作用。 问题答案： 您可以通过将背景变成图案来实现： 根据您的图像调整宽度和高度，然后从这样的路径中引用它：
-
我正在用Java制作一个游戏，目前背景设置不起作用，但前景设置可以工作。以下是我的主类代码： 下面是我的Screen类的代码：