Html 所有图像都在褪色
我需要在这个页面上的四个不同的图片淡入淡出。我还添加了一个徽标,由于某种原因,徽标会随着图片一起消失,尽管我不知道如何消失。我还想让导航栏填充页面的宽度Html 所有图像都在褪色,html,css,Html,Css,我需要在这个页面上的四个不同的图片淡入淡出。我还添加了一个徽标,由于某种原因,徽标会随着图片一起消失,尽管我不知道如何消失。我还想让导航栏填充页面的宽度 <!DOCTYPE html> <html lang="en-US"> <head> <style> body { background-image: url("bg.jpg"); } ul { list-style-type: none; padding: 0;
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
background-image: url("bg.jpg");
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #000000;
margin-left:100px;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
}
img {
position: absolute;
margin-top:10px;
border: 1px solid #ccc;
}
img img {
width: 100%;
height: auto;
}
img:nth-of-type(1){
-webkit-animation: fadeInOut 20s linear 20s infinite;
}
img:nth-of-type(2){
-webkit-animation: fadeInOut 20s linear 15s infinite;
}
img:nth-of-type(3){
-webkit-animation: fadeInOut 20s linear 10s infinite;
}
img:nth-of-type(4){
-webkit-animation: fadeInOut 20s linear 0s infinite;
}
@-webkit-keyframes fadeInOut{
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.image-wrapper {
position: relative;
height: 600px; // change to whatever works for you
}
.image {
position: absolute;
top: 50%;
border: 1px solid #ccc;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container {
width: 1000px;
}
.logo {
float: left;
width: 100px;
height: 50px;
}
.nav {
float: right;
width: 880px;
}
</style>
<title>Badass Burgers</title>
</head>
<body>
<!--Top Navigation Links (top horizontal navigation bar)-->
<img class="logo" src='logo.jpg'/>
<div class="container">
<ul class="nav">
<li><a class="active" href="info.php">About</a></li>
<li><a href="about.php">Team</a></li>
<li><a href="Menu.php">Menu</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
<div style="clear: both"></div>
</div>
<div class="image-wrapper">
<img class="image" src='food1.jpg' width="1400" height="600" />
<img class="image" src='Food2.jpg' width="1400" height="600" />
<img class="image" src='Food3.jpg' width="1400" height="600" />
<img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>
身体{
背景图片:url(“bg.jpg”);
}
保险商实验室{
列表样式类型:无;
填充:0;
溢出:隐藏;
背景色:#000000;
左边距:100px;
}
李{
浮动:左;
}
李阿{
显示:块;
颜色:白色;
文本对齐:左对齐;
填充:14px 16px;
文字装饰:无;
}
李娜:停下来{
背景色:#000000;
}
img{
位置:绝对位置;
边缘顶部:10px;
边框:1px实心#ccc;
}
img{
宽度:100%;
高度:自动;
}
img:第n种类型(1){
-webkit动画:fadeInOut 20s线性20s无限;
}
img:第n种类型(2){
-webkit动画:fadeInOut 20s线性15s无限;
}
img:第n种类型(3){
-webkit动画:fadeInOut 20s线性10s无限;
}
img:第n种类型(4){
-webkit动画:fadeInOut 20s线性0s无限;
}
@-webkit关键帧淡出{
0%{不透明度:1;}
17%{不透明度:1;}
25%{不透明度:0;}
92%{不透明度:0;}
100%{不透明度:1;}
}
.图像包装器{
位置:相对位置;
高度:600px;//更改为任何适合您的
}
.形象{
位置:绝对位置;
最高:50%;
边框:1px实心#ccc;
左:50%;
转化:translateX(-50%)translateY(-50%);
}
.集装箱{
宽度:1000px;
}
.logo{
浮动:左;
宽度:100px;
高度:50px;
}
.nav{
浮动:对;
宽度:880px;
}
坏蛋汉堡
img:nth类型(1){
是第一个图像。第一个图像是徽标。因此从2开始编号,或者(更好)使选择器更具体,例如:
.image-wrapper img:nth-of-type(1){
当然,其他人也是如此。旁注,
/
对CSS注释无效。需要/**/
@j08691,除非是sass,…我不这么认为;)我有时很懒,会添加一个x-
'供应商前缀';-)@GolezTrol-每当我想注释出CSS属性进行测试时,我几乎都会这样做兴,但只需一个x(打字减少50%)