HTML背景样式简单介绍
2015-11-28 21:24
651 查看
HTML背景样式
下面简单介绍几个html的背景样式，由于本人的水平有限，介绍的并不全面，望不要介意。
1. Background-color：表示背景颜色
示例：<body style="background-color: 颜色"></body>2. Backgrount-image:背景图片
示例：<body style="background-image: url (图片路径)"></body>3. Background-repeat:背景图片重复
示例：<body style="background-repeat: no-repeat "></body>说明：浏览器对background-repeat属性的默认值是repeat（重复），no-repeat表示图片不重复，repeat-x表示早x轴方向重复；repeat-y表示在y轴方向上重复。
4. Background-attachment:附加的
示例：<body style="background-attachment: scroll"></body>说明：浏览器对background-attachment:属性的默认值是scroll(图片跟着一起滚动)，如让图片固定不动的表示用fixed。
5.
4000
Background-position:位置
示例：<body style="background-positiont: top"></body>说明;top（顶部）也可以换成bottom(底部)，left(左边)，right(右边)；或者top right(右上)等由两个单词中间加一个空格组成的位置；还可以指定位置，如100px 100px 表示在x，y轴100px的地方。
综合上5个背景样式，代码示例可以是：
<body style="background-color:rgb(255,255,0); background-image:url(1.jpg);background-repeat:norepeat; background-attacnment:scroll; background-position:fixed">
<p style="background-color:rgba(255,0,0,0.5)">
这是一个段落。。。。
</p>
</body>
当然，每次都要写backgroun可能会比较麻烦，一种简化的写法是：
background：color image repeat attachment position
按照这样顺序将属性值说明也是可以的，但要注意的是这个顺序必须是这样。
所以以上代码可以简写为：
<body style="background:rgb(255,255,0) url(1.jpg) norepeat scroll fixed">
<p style="background-color:rgba(255,0,0,0.5)">
这是一个段落。。。。
</p>
</body>
补充：关于颜色的表示
Html中的3源色：red（红色）、green（绿色）、blue（蓝色）1. 英文名称：red、blue、green、yellow、black、pink、purple等。
在颜色的表示中，可以直接写颜色的英文名称，但是有时候可能会忘记英文单词，或者是有些颜色无法用英文表示（因为有些颜色我们也无法说清到底是属于什么颜色），或者是有的浏览器不支持某种英文单词表示的颜色。那么就可以用另外的方法表示颜色了。如：#00FF00 ,表示绿色，如下代码在浏览器中打开背景显示为绿色：
<body style="background-color:#00FF00">
<p>
这是一个段落。。。。
</p>
</body>
<2> 十进制表示：格式：rgb（0-255,0-255,0-255）
如：rgb(255,255,0)，表示红色和绿色组合，如下代码显示为：body style="background-color:rgb(255,255,0)">
<p>
这是一个段落。。。。
</p>
</body>
<3> 十进制表示，格式：rgba（0-255.0-255,0-255，透明度）
如：rgba(255,0,0,0.5)，表示红色，透明度是0.5，以下代码显示为：<body style="background-color:rgb(255,255,0)">
<p style="background-color:rgba(255,0,0,0.5)">
这是一个段落。。。。
</p>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 