您的位置：首页 > Web前端 > CSS

H5学习之18 css-background

2016-08-02 20:40 141 查看 
<!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;
这两个的配合会让位置发生变化。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航