首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少
麻烦人家把,反正我是这样
,几乎也少会用到背景图,原因很简单:就是有点害怕用背景图,感觉很繁琐,什么
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vODE0NzAyNWI2N2RiNDc5Yjk2MDljOTFhMDNmMGUzNWUvYnVlMjczKSU1RDlwZ2YuZ2lm.gif?w=700&webp=1)
尺寸啊,位置啊,是否重复啊等等,听着头都大,所以就一直没有去好好地学习一下它,每次碰见就劝自己“下次再
看吧”,然而“明日复明日,明日何其多”,干脆就解决了它
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vNDllYWI2YzdlMDBkNDhiYWE1MTRjM2UzYzU5MzU1MWIvJTdEM3VrYihfdmYlNjBsdy5naWY%3D.gif?w=700&webp=1)
background是css背景属性的简写,例如这样:background: #00FF00 url(bgimage.gif) no-repeat fixed top;
但是它又可以拆分成下面的几个子属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
这些子属性分别代表什么意思呢?下面开始一个个地为大家介绍
********************分割线*********************
属性一:background-color
如其名,这个属性是设置背景颜色的,有5种可能的值:
1.background-color:red;(已颜色英文名称命名的颜色值)
2.background-color:#ff0000;(十六进制的颜色值)
3.background-color:rgb(255,0,0);(rgb类型的颜色值)
4.background-color:transparent;(默认,背景色为透明)
5.background-color:inherit;(值从父元素继承)
当我们单独设置背景颜色时,background-color:red;和background:red;结果是一样的
属性二:background-image
该属性是定义背景图片的url,默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
使用方法:
background-image:url('demo.jpg'); //url中传入背景图的链接
属性三:background-position
该属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRBMU1qUXlOaTAyTWpJeE9ETTFNek11Y0c1bi5qcGc%3D.jpg?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vOTgyNTZiM2M3MjMwNDFiOTg3ZDNiNWEzZGRkOTI5OTIvYmFja2dyb3VuZDEucG5n.png?w=700&webp=1)
代码举例:
<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>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vNDhiZWIwMzNhNDgwNDVkNGIwZWE0MTQyYjViZTk3ZDQvYmFja2dyb3VuZDIucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRFMU9UQXhPUzA1T1RVME5EVXlOREV1Y0c1bi5qcGc%3D.jpg?w=700&webp=1)
属性四:background-size
background-size 属性规定背景图像的尺寸。
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRJek1EazFOeTB4TnpZMU5qRXlNamszTG5CdVp3PT0uanBn.jpg?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vYTYzNDdiMWM3MmM3NDA4YWE0ZDE0ODY1M2VhZmE5YTkvYmFja2dyb3VuZDMucG5n.png?w=700&webp=1)
代码示例:
<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>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vODFkZDAzOWZlZjE5NGFjYmI4YjQ0ZWY1YmEwNGE2Y2EvYmFja2dyb3VuZDQucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRNd05UZ3hOaTB4TVRnMU1UTXlOVGN1Y0c1bi5qcGc%3D.jpg?w=700&webp=1)
属性五:background-repeat
background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
详细说明
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。
提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vN2NhZDRlNzRiMmM0NGJkYmFiMzY5NjY3ZTE2YzZkOTcvYmFja2dyb3VuZDUucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRNek1ERTJNQzB4TWpnek1qTTVNRGcwTG5CdVp3PT0uanBn.jpg?w=700&webp=1)
代码示例:
<style type="text/css">
body
{
border:1px solid #000;
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>
</head>
<body>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vMTI0MTYyNGExMWQ4NGUxMmI3YzU1MjVjZWIzMGZlODEvYmFja2dyb3VuZDYucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRRd016VTRNaTB4TWpZME5ERXpOaTV3Ym1jPS5qcGc%3D.jpg?w=700&webp=1)
属性六:background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRReU1qazRPQzB6TWpReU56SXhNVGt1Y0c1bi5qcGc%3D.jpg?w=700&webp=1)
代码示例:
<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>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vM2QyNmYwZWEzNmJkNDJhM2FkNGZmOTE5N2IzYmRmODUvYmFja2dyb3VuZDgucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRVeE1qVXdOQzA0TWpJM09UWTJNREl1Y0c1bi5qcGc%3D.jpg?w=700&webp=1)
属性七:background-clip
background-clip属性规定背景的绘制区域
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vZGNiZDM4ZTcxNTczNDM5NGEyMmNhNzU2OGIxMjcxNDgvYmFja2dyb3VuZDkucG5n.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRVME9UZzJNeTB5TVRNMU56QTVOakV6TG5CdVp3PT0uanBn.jpg?w=700&webp=1)
代码示例:
<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>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vOGYxOWJmNmZiZWRjNDIxMzg3NDM5YjlkYzFkMTZhZWMvYmFja2dyb3VuZDEwLnBuZw%3D%3D.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRZeU5qSTJPUzB4TkRrME1qa3hPRFl4TG5CdVp3PT0uanBn.jpg?w=700&webp=1)
属性八:background-attachment
background-attachment规定如何设置固定的背景图像
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRZME5qYzROUzB4TkRJeU5qWTJPRGt3TG5CdVp3PT0uanBn.jpg?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vMDE0NTBiZTI2NTIxNDkzMGIyNTVlMmNiY2U4Nzg4ZjMvYmFja2dyb3VuZDExLnBuZw%3D%3D.png?w=700&webp=1)
代码示例:
<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>
运行结果:
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy81OC9BcHBEYXRhL0xvY2FsL1lOb3RlL2RhdGEvbTE1NjM2MTU1NTg1QDE2My5jb20vY2U0M2E0YmI2YzkxNDkxZTgwNmIzMTBhMWMwMzZkM2UvYmFja2dyb3VuZDEyLnBuZw%3D%3D.png?w=700&webp=1)
![CSS探案之 background背景属性剖析 CSS探案之 background背景属性剖析](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5ODRPRFE1T1Rrdk1qQXhOakF6THpnNE5EazVPUzB5TURFMk1ETXpNVEV5TVRjek1UZ3hOaTB4TWpVM016VTVOVFV4TG5CdVp3PT0uanBn.jpg?w=700&webp=1)
注意红框里面的滚动条,实际运行时,页面滚动,背景不跟随滚动,但是现在的截图看不出效果,所以对不起各位了
最后,我们将这些属性合并到background一个属性中写一个实例
代码:
<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>
运行结果:
结语:可能大家觉得我这篇文章只是在复制粘贴,没什么意义,确实如此,当我写到一半时,自己就在想放弃,但是
现在想起来,幸亏当时没有把那一半删掉,因为,在写的整个过程中,我先要看一遍w3school的帮助文档,结果还真
是收获不少。世上没有完全徒劳的事情,我坚信这一点,所以谨以此篇文章作为以后工作的参考