时间:2021-07-01 10:21:17 帮助过:43人阅读
<style type="text/css"> body { border:1px solid #000; background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } style> head> <body> <p><b>提示:b>您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。p> body>
<style> body { background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; } style> head> <body> <p>上面是缩小的背景图片。p> <p>原始图片:<img src="/i/bg_flower.gif" alt="Flowers">p> body>
<style type="text/css"> body { border:1px solid #000; background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } style> head> <body>
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
<style> div { border:1px solid black; padding:35px; background-image:url('/i/bg_flower.gif'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } style> head> <body> <p>background-origin:border-box:p> <div id="div1"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 div> <p>background-origin:content-box:p> <div id="div2"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 div> body>
<style> div { width:300px; height:300px; padding:50px; background-color:yellow; background-clip:content-box; border:2px solid #92b901; } style> head> <body> <div> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 div> body>
<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>
<style type="text/css"> body { background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; } 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>
运行结果: