如何让我的图像在HTML或CSS中的某个点停止重复？

时间：2015-04-12 01:16:29

标签： javascript html css image

我正在使用CSS＆amp;我的高级计算机类中的项目的HTML，我无法弄清楚如何使重复图像停在某一点（从顶部约500px可能？或至少低于标题）。

我将在下面发布一个链接到我的Html和CSS，我试图在它们点击水平线时让骆驼的剪辑关闭。我知道一点JavaScript，所以如果你能告诉我如何在JS中做到这一点也很棒。

Link

来源：

<!--Beginning skeleton of this document-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title> Meme Bunker </title>
<head>

   <link href="meme.css" rel="stylesheet" type="text/css" />

</head>


<body class="img">
<div id='cssmenu' class="img">
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Gifs</span></a></li>
   <li><a href='#'><span>Dank Memes</span></a></li>
   <li class='last'><a href='#'><span>Contact Me</span></a></li>
</ul>
</div>
<h1 align="center" class = "color">Welcome to Meme Bunker!</h1>
<hr align="center" width="100%" />
<!--Title and such ends here, horizontal line is disabled for now-->



<!--The Table Starts Here-->

<!--Table ends here-->



<!--Here is the button-->
<p align="center" ><button align="center" class="custom" name="Button" type="button" onclick="location.href='http://i.imgur.com/6PlRXhI.gif'">
     Click For SuperPowers </button></p>
<!--It ends here-->
<br />
<!-- This is a horizontal line -->
<p class = "comicsans" align="center">
Welcome to my new website!<br />
I will be showing you some cool memes!
</p>
</body>
</html>

CSS：

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background: #f96e5b;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 10;
  padding: 10;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 10;
  margin: 10;
}
#cssmenu.align-center ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 25px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #blue;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  top: 20px;
  height: 15px;
  width: 15px;
  background: black;
  opacity: .85;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: blue;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #000000;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-center li.last > a:after,
#cssmenu.align-center li:last-child > a:after {
  display: block;
}
#cssmenu.align-center li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 10px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}
h1.color      {
    color: #000000;
}

div {
    overflow:hidden;
}

div img{
    position:relative;
    left:-100px /*or whatever you want. can change it with js*/;
    top:-100px;
}

body.img {
    background: url(http://s15.postimg.org/44gu6yl1z/llama.gif) left top repeat-y, url(http://s15.postimg.org/94eaewqon/llama1.gif) right top repeat-y;
    background-color: #CC0000;  

}

a:hover {
    background-color: #DDDDFF;
}

p.times {
    font-family: Times New Roman, Times, serif;
}

p.comicsans {
    font-family: comic sans ms;
}





/* Center classes */
table.cen{
    align: center;
}
p.center{
    align: center;
}
div.align{
    align-content: space-around;
}
/* End of other stuff */




/* Links go here */
a.test: link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #C00;
}
a.test: hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #6F0;
 }
a.test: active {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #90F;
}

a.test: visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
}
/* End of links */

/* Start of input attributes */
input.custom{
    color:#08233e;
    font: comic sans ms, ‘Century Gothic’, AppleGothic, sans-serif;
    padding: 14px;
    background: url("giphy.gif") repeat-x center #ffcc00;
    background-color:rgba(255,204,0,1);
    border:1px solid #ffcc00;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border-bottom:1px solid #9f9f9f;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
}

input:hover{
    background-color:rgba(255,204,0,0.8);
}

input:active{
    position:relative;
    top:2px;
}

input.save{
    background-color:#a7dd32;
    background-color:rgba(167,221,50,1);
    border-color:#a7dd32;
}

input.save:hover{
    background-color:rgba(167,221,50,0.8);
}



</style>

2 个答案:

答案 0 :(得分：0)

您是否尝试过定义最大高度：x-px;在包含它的div上，或在图片本身上

答案 1 :(得分：0)

在你的身体中添加另一个div并将喇嘛背景添加到该div。您可能需要根据您的其他CSS更改z-index。

＆＃13;
＆＃13; 
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background: #f96e5b;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 10;
  padding: 10;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 10;
  margin: 10;
}
#cssmenu.align-center ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 25px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #blue;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  top: 20px;
  height: 15px;
  width: 15px;
  background: black;
  opacity: .85;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: blue;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #000000;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-center li.last > a:after,
#cssmenu.align-center li:last-child > a:after {
  display: block;
}
#cssmenu.align-center li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 10px solid #fb998c;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}
h1.color	  {
	color: #000000;
}

div	{
	overflow:hidden;
}

div img{
	position:relative;
	left:-100px /*or whatever you want. can change it with js*/;
	top:-100px;
}

.lamas {
	background: url(http://s15.postimg.org/44gu6yl1z/llama.gif) left top repeat-y, url(http://s15.postimg.org/94eaewqon/llama1.gif) right top repeat-y;
	background-color: #CC0000;	
	height:100px;
  position:absolute;
  top:0px;
  width:100%;
}

a:hover {
	background-color: #DDDDFF;
}

p.times {
    font-family: Times New Roman, Times, serif;
}

p.comicsans {
    font-family: comic sans ms;
}





/* Center classes */
table.cen{
	align: center;
}
p.center{
	align: center;
}
div.align{
	align-content: space-around;
}
/* End of other stuff */




/* Links go here */
a.test: link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #C00;
}
a.test: hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #6F0;
 }
a.test: active {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #90F;
}

a.test: visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
}
/* End of links */

/* Start of input attributes */
input.custom{
	color:#08233e;
	font: comic sans ms, ‘Century Gothic’, AppleGothic, sans-serif;
	padding: 14px;
	background: url("giphy.gif") repeat-x center #ffcc00;
	background-color:rgba(255,204,0,1);
	border:1px solid #ffcc00;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border-bottom:1px solid #9f9f9f;
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	cursor:pointer;
}

input:hover{
	background-color:rgba(255,204,0,0.8);
}

input:active{
	position:relative;
	top:2px;
}

input.save{
	background-color:#a7dd32;
	background-color:rgba(167,221,50,1);
	border-color:#a7dd32;
}

input.save:hover{
	background-color:rgba(167,221,50,0.8);
}



</style>
＆＃13; 
<!--Beginning skeleton of this document-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title> Meme Bunker </title>
<head>

   <link href="meme.css" rel="stylesheet" type="text/css" />
   
</head>


<body class="img">
  <div class="lamas"></div>
<div id='cssmenu' class="img">
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Gifs</span></a></li>
   <li><a href='#'><span>Dank Memes</span></a></li>
   <li class='last'><a href='#'><span>Contact Me</span></a></li>
</ul>
</div>
<h1 align="center" class = "color">Welcome to Meme Bunker!</h1>
<hr align="center" width="100%" />
<!--Title and such ends here, horizontal line is disabled for now-->



<!--The Table Starts Here-->

<!--Table ends here-->



<!--Here is the button-->
<p align="center" ><button align="center" class="custom" name="Button" type="button" onclick="location.href='http://i.imgur.com/6PlRXhI.gif'">
     Click For SuperPowers </button></p>
<!--It ends here-->
<br />
<!-- This is a horizontal line -->
<p class = "comicsans" align="center">
Welcome to my new website!<br />
I will be showing you some cool memes!
</p>






</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题