CSS背景背景颜色的设置和使用透明度实例说明【百科全说】

CSS背景图片和颜色是否美观是给网页第一印象最直观的感觉，我们在设置网页的时候合理使用背景图片和背景颜色能为网页增添不一样的感觉。今天我就来详细分析和讲解背景颜色的设置的三种方式和背景颜色透明的相关的知识点是实例。

操作方法

01

HTML的背景颜色我们该怎么设置呢？这里设置CSS背景图片有三种方式，分别有用英文字母来设置的，具体的设置代码如下： <html> <head> <title>背景颜色的设置</title> <style type="text/css"> body{ background-color:red; } </style> </head> <body> </body> </html> 通过如上的代码我们可以将我们网页的背景颜色设置成红色，具体执行效果如下图所示。
02

除了这个办法之外还有其他的方式设置网页的背景颜色吗？答案肯定是有的，这里我就讲讲用用三原色来设置网页的背景颜色，具体代码如下： <html> <head> <title>背景颜色的设置</title> <style type="text/css"> body{ background-color:rgb(0,255,0); } </style> </head> <body> </body> </html> 我们可以看到上面的设置方法直接是background-color:rgb(0,255,0);将背景设置绿色的。
03

其实设置网页的背景颜色还有一种办法，那就是用颜色的16进制的值来设置，我们怎么获得颜色的十六进制的值呢？这里我们可以在浏览器中搜索CSS16进制颜色对照表，可以看到每个颜色的代码值。
04

上面我讲解了如何查找每个颜色的16进制值，这里我就用切实的例子来说明问题，具体的代码如下： <html> <head> <title>背景颜色的设置</title> <style type="text/css"> body{ background-color:#0000ff; } </style> </head> <body> </body> </html>
05

我们这里学习了设置背景颜色，如果有如下代码，里面的<p></p>对中的内容该怎么显示呢？ <html> <head> <title>背景颜色的设置</title> <style type="text/css"> body{ background-color:#0000ff; } </style> </head> <body> <p>我爱编程，我热爱编程</p> </body> </html> 按照继承的关系来说，我们的P中文字应该背景颜色应该也是红色的。但是可以看到如下图所示的执行结果，发现文字颜色是黑色的，这是为什么呢？
06

现在我就来解决上面所提到的问题，要解决上面的问题这里说一个新的知识点这就是背景颜色透明这个属性值，就是因为这个属性值使得我们的P得背景颜色透明了，如果单独加上透明和设置P的颜色背景为绿色来说明问题。 <html> <head> <title>背景颜色的设置</title> <style type="text/css"> body{ background-color:red; } </style> </head> <body> <p style="background-color:green;">我爱编程，我热爱编程</p> <p style="background-color:transparent;">我爱编程，我热爱编程</p> <p >我爱编程，我热爱编程</p> </body> </html> 可以看到具体的效果，是不是发现默认的值和设置背景颜色为透明度是一样的，所以说每个元素都加了背景透明这个默认项目。

CSS背景背景颜色的设置和使用透明度实例说明

操作方法

相关推荐