HTML背景样式简单介绍

作者：繁依Fanyi0 | 2024-08-07 04:39:40

踩

html背景

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. 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">

这是一个段落。。。。

</body>

当然，每次都要写backgroun可能会比较麻烦，一种简化的写法是：

background：color image repeat attachment position

按照这样顺序将属性值说明也是可以的，但要注意的是这个顺序必须是这样。

所以以上代码可以简写为：

<body style="background:rgb(255,255,0) url(1.jpg) norepeat scroll fixed">

这是一个段落。。。。

</body>

补充：关于颜色的表示

Html中的3源色：red（红色）、green（绿色）、blue（蓝色）

1. 英文名称：red、blue、green、yellow、black、pink、purple等。

在颜色的表示中，可以直接写颜色的英文名称，但是有时候可能会忘记英文单词，或者是有些颜色无法用英文表示（因为有些颜色我们也无法说清到底是属于什么颜色），或者是有的浏览器不支持某种英文单词表示的颜色。那么就可以用另外的方法表示颜色了。

2. 遵循：rrggbb的规则组合表示颜色。

<1> 用十六进制表示：#rr gg bb ,组合范围：#000000 ~ #FFFFFF

如：#00FF00 ,表示绿色，如下代码在浏览器中打开背景显示为绿色：

这是一个段落。。。。

</body>

<2> 十进制表示：格式：rgb（0-255,0-255,0-255）

如：rgb(255,255,0)，表示红色和绿色组合，如下代码显示为：

body style="background-color:rgb(255,255,0)">

这是一个段落。。。。

</body>

<3> 十进制表示，格式：rgba（0-255.0-255,0-255，透明度）

如：rgba(255,0,0,0.5)，表示红色，透明度是0.5，以下代码显示为：

这是一个段落。。。。

</body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/940936