CSS实例教程(5):根据案例学习培训CSS情况

2021-01-20 16:31 jianzhan

本CSS实例教程详细介绍:1.怎样应用像向来精准定位情况图象,2.怎样设定固定不动的情况图象,3.全部情况特性在1个申明当中。
本CSS实例教程详细介绍:1.怎样应用像向来精准定位情况图象,2.怎样设定固定不动的情况图象,3.全部情况特性在1个申明当中。
参照脚本制作之家有关CSS情况的基础理论专业知识:CSS实例教程(1):学习培训CSS情况有关专业知识。 1、怎样应用像向来精准定位情况图象
本例演试怎样应用像向来在网页页面上精准定位情况图象。
<html>
<head>
<style type="text/css">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>
<body>
<p><b>注解:</b>以便在 Mozilla 中完成此实际效果,background-attachment 特性务必设定为 "fixed"。</p>
</body>
</html> 2、怎样设定固定不动的情况图象
本例演试怎样设定固定不动的情况图象。图象不容易伴随着网页页面的别的一部分翻转。本文由脚本制作之家jb51.net梳理公布!转载请注明出处,感谢!
<html>
<head>
<style type="text/css">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
<p>图象不容易随网页页面的其余一部分翻转。</p>
</body>
</html> 3、全部情况特性在1个申明当中
本例演试怎样应用简写特性来将全部情况特性设定在1个申明当中。
<html>
<head>
<style type="text/css">
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>
<body>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
<p>这是1些文字。</p>
</body>
</html>