<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="css.css" type="text/css" rel="stylesheet" /> </head> <body> <h1 id="beijingyanse">背景颜色red</h1> <h1 id="beijingyanse2">背景颜色继承父元素</h1> <p> <span class="wenbenyanse">文本颜色区域</span>非文本颜色区域非文本颜色区域非文本颜色区域非文本颜色区域 <span class="wenbenyanse">文本颜色区域</span> </p> <p id="quyubeijing">一个区域内的背景图片 <a href="" id="quyubeijing2">给一个链接设置背景图片</a> </p> <div id="quyubeijing3"> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> </div> <div id="quyubeijing4"> </div> </body> </html>
body{ background-color: darkgray; background-image: url(u=4007867295,814465420&fm=21&gp=0.jpg); /*设置的图片会覆盖颜色属性*/ padding: 10px; margin-left: 20px; background-repeat: no-repeat; /*默认是图片会重复填满元素，沿X与Y方向填满 可以设置成单独填充X或者Y方向 如果不想重复要设置成 no-repeat 只出现一次*/ background-attachment: fixed; background-position: center; /*这两句是将图片放到整个元素的中央。 第二句根据语义就是规定图片位置 到中心 如果不加第一句，图片位置会有变化，不加第一句是根据目前所有元素的最大 长宽 来决定位置， 加上之后是根据你的屏幕的长宽来决定位置。 下面的div就是这样，因为body的长宽可能还没有定，不加fixed是根据元素来填充。如果设置了fixed值， 则图片会根据屏幕的长宽找位置(而不是根据div元素的长宽，即使div元素在那样一个位置，也是会根据屏幕长宽) 因为图片位置是固定的，再设置位置，就是屏幕上的位置。 其实也就是 有无fix的值，然后设置位置的时候。有FIXED设置，就是相对于屏幕，无，就相对于元素。 关于attachment的官方解释是 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 设置成fixed之后图片就不会随着滚动了 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。 */ } #beijingyanse{ background-color: red ; padding: 10px; } #beijingyanse2{ background-color: transparent; /*颜色继承自父元素*/ padding: 10px; border: solid red 1px; } .wenbenyanse{ background-color: bisque; } #quyubeijing{ color: blue; font-size: 2em; height:50px; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); padding:10px; } #quyubeijing2{ background-image: url("5.jpg"); padding: 40px; margin: 20px; background-attachment:fixed; background-position: center; } #quyubeijing3{ width:800px; height:800px; background-color: aliceblue; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); background-repeat: no-repeat; background-position: 50% 50%; /*position值可以由两个 百分比数值代替，代表图片放在元素的什么位置 50%50% 是 中心， 官方解释：换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。 */ } #quyubeijing4{ width:800px; height:800px; background-color: bisque; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); background-repeat: no-repeat; background-position: 100px 100px; /*直接用 像素值标识位置，代表图片左上角放在元素的什么像素位置上 官方解释：这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。 */ }
具体效果如下：
代码解释如下：
可以给单独的区域设置背景颜色
<h1 id="beijingyanse">背景颜色red</h1>
#beijingyanse{ background-color: red ; padding: 10px; }
还可以继承自父元素
<h1 id="beijingyanse2">背景颜色继承父元素</h1>
#beijingyanse2{ background-color: transparent; /*颜色继承自父元素*/ padding: 10px; border: solid red 1px; }
给单独的一串文本进行背景颜色设置
<p> <span class="wenbenyanse">文本颜色区域</span>非文本颜色区域非文本颜色区域非文本颜色区域非文本颜色区域 <span class="wenbenyanse">文本颜色区域</span> </p>
.wenbenyanse{ background-color: bisque; }
还有设置背景图片
<p id="quyubeijing">一个区域内的背景图片 <a href="" id="quyubeijing2">给一个链接设置背景图片</a> </p>
#quyubeijing{ color: blue; font-size: 2em; height:50px; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); padding:10px; } #quyubeijing2{ background-image: url("5.jpg"); padding: 40px; margin: 20px; background-attachment:fixed; background-position: center; }
另外还有包含其他知识点的设置背景图片
<div id="quyubeijing3"> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> </div>
#quyubeijing3{ width:800px; height:800px; background-color: aliceblue; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); background-repeat: no-repeat; background-position: 50% 50%; /*position值可以由两个 百分比数值代替，代表图片放在元素的什么位置 50%50% 是 中心， 官方解释：换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。 */
还有一个设置背景图片
<div id="quyubeijing4"> </div>#quyubeijing4{ width:800px; height:800px; background-color: bisque; background-image: url(PSxiaosuihuabeijing_176889_small.jpg); background-repeat: no-repeat; background-position: 100px 100px; /*直接用 像素值标识位置，代表图片左上角放在元素的什么像素位置上 官方解释：这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。 */ }
还有关于body背景的部分
body{ background-color: darkgray; background-image: url(u=4007867295,814465420&fm=21&gp=0.jpg); /*设置的图片会覆盖颜色属性*/ padding: 10px; margin-left: 20px; background-repeat: no-repeat; /*默认是图片会重复填满元素，沿X与Y方向填满 可以设置成单独填充X或者Y方向 如果不想重复要设置成 no-repeat 只出现一次*/ background-attachment: fixed; background-position: center; /*这两句是将图片放到整个元素的中央。 第二句根据语义就是规定图片位置 到中心 如果不加第一句，图片位置会有变化，不加第一句是根据目前所有元素的最大 长宽 来决定位置， 加上之后是根据你的屏幕的长宽来决定位置。 下面的div就是这样，因为body的长宽可能还没有定，不加fixed是根据元素来填充。如果设置了fixed值， 则图片会根据屏幕的长宽找位置(而不是根据div元素的长宽，即使div元素在那样一个位置，也是会根据屏幕长宽) 因为图片位置是固定的，再设置位置，就是屏幕上的位置。 其实也就是 有无fix的值，然后设置位置的时候。有FIXED设置，就是相对于屏幕，无，就相对于元素。 关于attachment的官方解释是 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 设置成fixed之后图片就不会随着滚动了 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。 */ }
重点是 关于background-attachment: fixed; background-position: center;这两个的配合会让位置发生变化。
2142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
