热搜:前端 nest neovim nvim

一招解决css原素五彩斑斓的背景具体内容

lxf2023-05-29 19:15:01

本文将开始一个新的一个章节目录。所有好看的事情都少不了色调,下面我们就来学习一个简单的,那便是给原素设置背景颜色。赶紧来了解一下吧。

大家也都知道并没有背景色元素是不好看的,全部大家还是应该给原素设置背景颜色的。

我们首先来说一个小事例吧,了解一下什么叫背景色,如何去设定。

已经知道,我们有一个div原素,一个p原素,如今我希望div元素背景色是鲜红色,而p元素背景色是蓝色,请问一下该如何去干?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background-color: red;
    }
    p{
      background-color:blue;
    }
  </style>
</head>
<body>
<div>为了能表明,说明这一一个div原素</div>
<p>为了能表明,说明这一一个p原素</p>
</body>
</html>

这种小事例的结果就是

一招解决css原素五彩斑斓的背景具体内容

能够看见,大家实现了题型所给的规定,div元素背景色是鲜红色,而p元素背景色是蓝色。

了解那么多以后,大家去看一下什么属性能够设置背景颜色吧。

background-color特性设定元素背景色。这一特性为原素设定一种单色。这个颜色会添充元素具体内容、内边距和外框地区,拓展到原素外框其外界限(但不包含外边距)。假如外框有全透明一部分(如斜线外框),会通过这种全透明一部分显现出背景颜色。

这一特性还有一个十分重要的值,这是一个全透明值。虽然在很多情况下,没必要应用 transparent。但是如果你不想让某原素有着背景颜色,与此同时也不期待消费者对浏览器颜色调整影响到了你的设计方案,那样设定 transparent 值还是很有必要的。

强烈推荐学习培训:css视频教学

以上就是关于一招解决css原素五彩斑斓的背景具体内容,大量欢迎关注AdminJS其他类似文章!