gpt4 book ai didi

html - 背景图像在 div 元素中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 02:35:06 25 4
gpt4 key购买 nike

不要在带有导航项类的 div 中使用背景图像。所有图像都在同一目录中。标题作品中的背景。使用 img src 一切都很好。问题出在哪里?

我什么都试过了。

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>

最佳答案

你应该给你的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 .

关于html - 背景图像在 div 元素中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35843700/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com