您的位置：首页 > 其它

background相关属性问题

2018-03-23 22:18 176 查看
    background是专门设置背景的一个属性，它包含了很多与背景相关的设置属性，包括
1.background-color（背景色）
   所有元素都可以设置背景颜色，包括所有的内联元素和块元素，效果如下
块元素p{background-color:red;}

<body>
<p>设置背景颜色为红色</p>
</body>效果：



还可以设置补白的大小，背景会随着元素的大小进行改变
内联元素<style>

p{
background-color: red;
padding: 20px;

}
span{
background-color: gray;
padding: 10px;
}
</style>

<body>
<p>
设置背景颜色为红色
<span>设置背景为灰色</span>
</p>
</body>
效果图如下：



我将块元素的补白设置成20px，内联元素的补白设置成10px，对比还是挺明显的，也就是说背景囊括的范围与设置背景的元素有关，背景只负责覆盖该元素的部分，不会外延。
2.background（背景图像）
背景图像这个属性经常使用，通常是直接设置body，但是它也可以设置其他的段落或者是行内元素body{
background-image: url(img/1520145101552.jpg);
}

p{
background-image:url(img/图像.jpg) ;
padding: 20px;

}
span{
background-image: url(img/1520145101552.jpg);
padding: 10px;
}

得到下面的图，span内联元素里的背景，p中的背景以及body中的背景都不一样



如果将span中的背景图片设置删掉，则该文本的背景是P的背景，这就是所谓的透明，即子元素在没有设置背景的时候，显示的是父元素的背景



必须说明的是，背景属性都不能继承。
3.background-repeat（背景重复）
这个属性是用来控制背景图像是否在元素的区域内重复的，对于很大的图像就不存在这个问题，因为大图像本身就已经将整个网页覆盖了（这里提一个小问题，如果网页很长怎么办，在滑动网页的时候就会看到重复的背景图，这样就会很丑，怎样才能让我网页能正常滚动，背景也不会变呢）；但是对于较小的图片，就可以设置了，在没有进行设置的时候，默认的是从左到右重复，一行满了就会接着换行；如果设置的是no-repeat，图像就会在左上角放置；如果设置的是repeat-x，图片只会排在一行，同理，repeat-y是只会排在一列。p{background-repeat:repeat-x;}


4.background-position（背景定位）
这个属性很重要也很难理解，在css中涉及到定位的问题都有些难理解，但是自己多尝试一下就好了。
背景定位的方式有三种：
<1>关键字
关键字是比较好理解的，因为它直接明了地说明背景的位置，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。举例子：body{
height: 600px;
width: 800px;
background-image: url(img/award.gif);
background-repeat: no-repeat;
background-position:left top;
}


这里要注意的是，要先把body的大小设置大一些，因为默认大小的情况下，图片就会超出浏览器的边框；

等价的位置关键字表：
单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left
<2>用百分数进行定位
这个方法可能没有关键字那么直观，但是如果用熟了过后你会发现这个很方便
可以用这个方法达到上面同样的效果
body{
height: 600px;
width: 800px;
background-image: url(img/award.gif);
background-repeat: no-repeat;
background-position:0% 0%;
}这样也能使图像在左上角，原理是这个百分数指的的是相对与浏览器的，而不是相对与页面的，如果我进行以下设置，就可以看得很清楚了body{
height: 600px;
width: 800px;
background-image: url(img/award.gif);
background-repeat: no-repeat;
background-position:50% 50%;
border: dotted black thin;
}为body部分设置了一个边框，这样看得更加明显



<
4000
/p>
<3>长度值所谓的长度值即为像素值，这个是直接指定相对浏览器界面的值，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
这个还比较好理解，这个像素大小的偏移点是左上角，可以以左上角为原点，画一个坐标系来理解

5.background-attachment（背景关联）
这个属性可能不常见，但是作用大大的，它就是用来解决我文中提到的那个小问题的，如果网页很长，背景重复怎么办的问题，这里有一个属性值是fixed,将背景固定不动，在滑动网页的时候，背景不会重复；默认的情况下是背景随着网页的滑动而动。如果要想理解更深的话，可以去w3school中进行练习。

好了，今天的文章就写到这里，都是一些基础的东西，有的部分参照了w3school的内容，都是自己的理解，加上实例，可以更好懂。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航