例如：从左向右循环移动
<html>
<head><title>向右循环滚动</title><head>
<body>
<div id=demo style="overflow:hidden;height:68px;width:800px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top nowrap="nowrap">
<img src=">
有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused;，继续动画是animation-play-state:running; （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
<!DOCTYPE html><html>
<head>
<meta ><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
{
margin: 0;
padding: 0;
}
demo {
margin: 0 0 0 100px;
}
img {
width: 200px;
height: 200px;
border: 1px solid #DCDCDC;
padding: 5px;
box-sizing: border-box;
}
img img {
width: 100%;
height: 100%;
}
msg {
width: 200px;
text-align: center;
box-sizing: border-box;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
border: 1px solid #000000;
/left: -30px;你是不是布局出现了问题,如果你非要左移的话,去掉注释/
}
</style>
<body>
<div class="demo">
<div class="img">
<img src=">
1、首先我们需要插入一张，并且只出现一次，并设计出现的位置在左上角，可以按照如下代码来完成：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top left;
}
</style>
</head>
<body>
</body>
</html>
可以看到背景出现的位置在浏览器的左上角，这个和默认的设置是一样的。
2、我们需要让出现在上方的正中间，这里我就用代码来说明问题，具体详细代码如下：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top center;
}
</style>
</head>
<body>
</body>
</html>
从下图的执行结果可以看到，我们的背景出现在了上方的正中间这个位置上了。
3、在上方的中间和左边都出现了，接下来设置出现在上方的右边，具体代码如下所示：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
</body>
</html>
可以看到如下图所示的执行效果图，出现的位置在上方的右边了。
4、如果需要出现的位置在正中间，我们知道设计网页的时候背景等等元素一般都是需要放在正中间这个位置上的，这里我就来分析下如何将背景放置在正中间这个位置上，具体代码如下：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
</body>
</html>
可以看到如下的执行结果，背景出现在了下方的正中间这个位置上了。
5、设置出现在背景的下方左边这个位置，下边用到了bottom这个属性值来设置的，具体代码如下：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:bottom left;
}
</style>
</head>
<body>
</body>
</html>
可以看到如下图所示的结果，
6、还可以设置背景出现的位置在最下方，可以看到如下代码：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:bottom;
}
</style>
</head>
<body>
</body>
</html>
通过如下图可以看到具体的执行效果，只用一个bottom就能设置出现在最下方这个位置上了。
7、用background-position设置的位置除了使用相对位置还能使用绝对位置来设置，可以设置像素值来确定背景左上角的坐标点来确定，具体代码如下：
<html>
<head>
<title>位置设置</title>
<style type="text/css">
body{
background-image:url("2jpg");
background-attachment:scorll;
background-repeat:no-repeat;
background-position:150px 150px;
}
</style>
</head>
<body>
</body>
</html>
从下图可以看到我们的执行结果，背景出现的位置是150px,150px这个点作为左上角的起始点。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）