[CSS]关于如何使用background属性的详尽说明!

“我不知道如何设置背景值。”
“如何在后台使用它?”

当您开始学习CSS时,许多人可能会遇到这样的问题。

您可以在背景中设置背景和图像,但是对于初学者来说,某些事情可能无法正常工作。

另一方面,背景是我们几乎总是在网页设计中使用的属性之一。
换句话说,您需要确保掌握它。

如果这有点困难,请不要担心。
background属性有一点要注意,如果您意识到这一点,请不要害怕。
让我们借此机会来掌握它。

阅读本文后,您将能够很好地使用背景!

什么是背景

“背景”是CSS属性,可让您更改背景色并通过设置来显示图像。在背景中设置颜色和图像的优点是,与将元素放置在上方或下方相比,您可以将它们显示为HTML中的元素,并使用“显示”等来获得有效的外观。

与“图像标签”的区别在于,“图像标签”被搜索引擎识别为嵌入式元素,但是在“背景”中显示的图像被视为设计。因此,最好用html编写要让搜索引擎识别的具有高重要性的图像,但是对于不太重要的图像,最好设置带有“背景”的图像。

背景属性类型和值

有几种类型的背景属性以“ background-”开头。在下表中,有七个常用的背景属性。您可以设置每个,但也可以一次指定它们。另外,每个参数可以采用的值是不同的。

背景类型 描述
背景颜色 您可以采用十六进制值,例如“ rgba()”或“#fef4f4”。 对于rgba(),写为“ rgba(255,255,128,0.4);”,最后一个数字为“ 0”。–您可以将值取为最大1”并更改透明度。
背景图片 设置URL(绝对路径)或URL(相对路径)。 通常,使用一种图像设置,但可以使用两种或更多种设置。如果同时设置-color和-image,则-image设置将位于顶部。
背景尺寸 您可以设置“ 盖”,“ 包含”,“%”,“ px”等。 显示“封面”,并将宽度调整为整个设置范围。同样,在保持宽高比的同时显示“包含”。在这种情况下,设置的宽度可能会有余量,因此在使用时要小心。
背景位置 除了“ px”和“%”之外,还可以将该值指定为“ center”。 可以设置X轴和Y轴位置。在定位的情况下,如果要同时设置X轴和Y轴,则将其设置为背景位置:中心(X轴)顶部(Y轴);。对于单个值,Y轴被视为“中心”。默认设置为左上。在指定位置的情况下,可以采用“中心,左,右,上,下”。
背景重复 可以采用四个值:“ repeat”,“ repeat-X”,“ repeat-Y”和“ no-repeat”。 初始值为图像的“重复”,因此基本上可以重复显示图像。您需要设置“ no-repeat”来停止它。如果只显示一张图像,请设置“无重复”。
背景附件 该值可以是“滚动”,“固定”或“本地”之一。 “-附件”提供诸如固定背景图像和滚动等功能。
背景起源 有三个值,“边界框”,“填充框”和“内容框”。 背景起源可以设置背景图像和背景颜色的参考点。参考点在左上角,您可以指定起始点是元素的右上角,填充的右上角还是边框的右上角。
背景剪辑 有四个值,“边界框”,“填充框”,“内容框”和“文本”。 在背景片段中具有背景图像的图像和要绘制的背景颜色的范围是很好的。在“内容框”中,背景图像(背景色)放置在元素内。 “填充框”将背景图像(背景色)放置在填充中。 “边框”将范围扩展到边框之外,并放置背景图像(背景色)。

如何使用背景色

背景颜色允许您设置背景图像的颜色。该值通常设置为“十六进制值”,“ rgb”或“ rgba”。 “ rgb”和“ rgba”之间的区别在于是否可以设置透明度。同样,这并不意味着除非添加“ -color”,否则不显示颜色。它还显示在“背景:颜色设置”中。让我们实际检查一下。

指定十六进制颜色代码

请参考下面的链接以获取颜色代码。通常,当使用单色时,通常使用十六进制颜色代码。

色标

<div class="background">
   Background
</div>
.background{
  背景颜色: #b44c97;
  padding: 50px;
  text-align: center;
  color: #fff;
}

由rgb指定

十六进制颜色代码可以替换为rgb。 rgb是红色(红色),绿色(绿色)和蓝色(蓝色)的不同主色的组合。例如,红色是rgb(204,0,0),深蓝色是rgb(52,38,89)。
颜色代码到RGB转换工具

上面的紫色代码通过rgb()变为以下代码。如果您知道可以这样写就可以。

.background{
  背景颜色: rgb(180, 76, 151);
  padding: 50px;
  text-align: center;
  color: #fff;
}

因此,如果要为该颜色添加透明度,请使用rgba。让我们在数字的末尾放置一个表示透明度的值。 0是透明的,1等效于十六进制或rgb。在这里,我们将“ 0.2”设置为接近透明。它将显示如下。您可以看到它几乎是透明的。

.background{
  背景颜色: rgba(180, 76, 151, 0.2);
  padding: 50px;
  text-align: center;
  color: #fff;
}

由线性渐变指定

现在,背景还可以设置与“背景”颜色设置有关的渐变。使用“线性梯度”或“径向梯度”作为该值。在此,在()中设置颜色代码,例如“线性渐变(#DB245B,#EB7988)”。可以在此处设置多个颜色代码。

但是,有一些警告。不要添加“背景颜色:线性渐变(#DB245B,#EB7988);”之类的“颜色”。它不会显示。因此,请写下“背景:线性渐变(#DB245B,#EB7988);”。

线性梯度

linear-gradient提供线性梯度。您可以设置多个颜色代码,但是这次我们设置两个。如果输入“ to right”,则左右的颜色将不同,如果输入“ to top”,则上下的颜色将不同。

.background{
  background:linear-gradient(to right, #DB245B, #EB7988);
  padding: 50px;
  text-align: center;
  color: #fff;
}

由径向渐变指定

径向渐变提供了圆形渐变。括号中的值为径向渐变(中心颜色,外部颜色)。

.background{
  background:radial-gradient(#DB245B, #F2D8DF);
  padding: 50px;
  text-align: center;
  color: #fff;
}

关于等级,您可以通过将等级与%分开来调整等级的开始位置,但是它不在主要主题范围内,因此如果您想了解更多信息,请进行检查。

如何使用背景图片

您可以在背景图像中设置图像。进行如下基本设置。 ()是绝对的还是相对的。但是,通常,它是一个相对规范,并且会写入从CSS文件夹中看到的相对路径。对于此图像的URL,请从CSS的外部文件夹中看到路径,将其写入“图像文件夹”。

.セレクタ{
  背景图片: url(画像URL);
}

现在设置图像。下面用相对路径指定图像的位置。在与CSS文件相同的层次结构中编写“ ./”,然后设置较低的层次结构。

.background{
  背景图片: url("./img/img3.jpg");
  背景颜色: #DB245B;
  背景尺寸: 盖;
  padding: 50px;
  text-align: center;
  color: #fff;
}

接下来,您可以指定绝对路径。

.background{
  背景图片: url("//www.sample.com/img/image.jpg");
  背景颜色: #DB245B;
  背景尺寸: 盖;
  padding: 50px;
  text-align: center;
  color: #fff;
}

它将显示如下。由于某些原因,此图像可能不可见。考虑到这种情况,最好将背景色设置在一起。

该图像具有多种设置。如下图所示,在“背景图像”中设置了两个图像。用“,”分隔图像路径,例如“ url(),url()”。在下文中,为了清楚起见,将尺寸设置为50%,并调整布置。

.background{
  margin-top: 100px;
  背景图片: url("./img/img3.jpg"), url("./img/img4.jpg");
  背景尺寸: 50%, 50%;
  背景重复: no-repeat, no-repeat;
  背景位置: left top, right top;
  padding: 50px;
  text-align: center;
  color: #fff;
}

如何使用背景尺寸

背景尺寸属性允许您设置背景的宽度。此值可以是“ 盖”,“ 包含”,“ relative(%等)”或“ absolute(px)”。
此处特别说明“封面”和“包含”。

将图像显示为元素的整个宽度。
包含 在保持图像高宽比的同时显示。

“背景:封面”的行为

“封面”是图像的宽度和高度,较大的则调整尺寸。

关于此设置要注意的一件事是“高度”设置。 “绝对规格(px)”适合完全显示,但如果没有必要,则可以指定“自动”。

.background{
  背景图片: url("./img/img3.jpg");
  背景尺寸: 盖;
  padding: 50px;
  text-align: center;
  color: #fff;
}

“背景:包含”的行为

如果设置为“背景:包含;”,则图像的纵横比将被优先显示,如下所示。换句话说,要显示的图像保持原样显示。

因此,您要显示的元素的宽度会有一个空白。另外,请注意,如果您未设置“ 背景重复:no-repeat;”,则图像将重复。为避免这种情况,最好将值指定为“ 盖”或“ 100%”。

.background{
  背景图片: url("./img/img3.jpg");
  背景尺寸: 包含;
  背景重复: no-repeat;
  padding: 50px;
  text-align: center;
  color: #fff;
}

如何使用背景重复

遍历图像的属性。默认情况下,执行重复。为防止这种情况,您需要指定“ 背景重复:no-repeat;”。但是,有些人可能想知道为什么在图像显示中必须使用“重复”效果。但是,有时会使用此“背景重复”。

例如,有下面的图像。它通常用于背景图像。

参见下图。以下不是单个图像。重复图像的结果。通过在垂直和水平方向重复处理小尺寸图像来显示背景图像。图像重复直到指定的高度。

.background{
  背景图片: url("./img/cloth-a2.png");
    background-repeat: repeat;
  min-height: 400px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

重复x的行为

“重复-x”仅在X轴(水平方向)上重复图像。您可以看到图像未按Y轴方向(垂直方向)排列,如下图所示。

.background{
  背景图片: url("./img/img5.png");
    background-repeat: repeat-x;
  min-height: 400px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

重复行为

“重复-y”沿Y轴(垂直方向)重复图像。您可以看到图像未沿X轴方向(水平方向)排列,如下图所示。

.background{
  背景图片: url("./img/img5.png");
    background-repeat: repeat-y;
  min-height: 400px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

如何使用背景位置

背景位置指定开始放置图像的位置。位置指定值有各种设置值。

位置指定按“上/下/右/左”

可以设置的值为“左上右下”。合并以指定位置。例如,如果您输入“ top left”,它将被放置在左上方。为了清楚起见,我们将大小设置为60%。

.background{
  背景图片: url("./img/img5.png");
    background-position: bottom center;
  背景尺寸: 60%;
  min-height: 400px;
  背景重复: repeat-y;
  padding: 50px;
  text-align: center;
  color: #fff;
}

您可以看到它位于“底部中心”,如下所示。

然后输入“左上方”,图像将放置在右上角。

.background{
  背景图片: url("./img/img3.jpg");
    background-position: top left;
  背景尺寸: 60%;
  背景重复: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

通过“%”和“ px”指定位置

您也可以从右上方开始指定“%”和“ px”。但是,如果数字是数字指定的,则以“水平和垂直顺序”指定。

.background{
  背景图片: url("./img/img3.jpg");
  背景位置: 30% 20%;
  背景尺寸: 60%;
  背景重复: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

以下是水平距离为30%,垂直距离为20%的情况。

这也适用于“ px”规范。如下所示指定“ 100p x 50px”。

.background{
  背景图片: url("./img/img3.jpg");
  背景位置: 100px 50px;
  背景尺寸: 60%;
  背景重复: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

然后您可以看到图像水平移动了100px,垂直移动了50px。

如何使用背景附件

背景附件属性允许您指定背景图像是固定的还是滚动的。值是“ 滚动”,“ 固定”和“ local”,但初始值为“ 滚动”。通常使用“滚动”和“固定”,“背景附着”通常设置为“固定”。

滚动 这是初始值。如果滚动屏幕,图像也将滚动。
固定 如果滚动屏幕,图像将被固定,其他元素也将滚动。

固定设置

如下所示,背景图像是固定的,并且字符随其滚动而滚动。

图片来自Gyazo
.background{
  背景图片: url("./img/img4.jpg");
  背景附件: 固定;
  背景重复: repeat;
  背景位置: center top;
  padding: 10px;
  text-align: center;
  color: #fff;
}

背景批处理说明

对于background属性,最好设置每个专用属性,但是可以一次指定值。例如,让我们一次设置颜色,图像,图像大小,图像位置和“重复”。设置值没有特定的顺序。每个值都是可选的。

.background{
  background: #f2a0a1 url("./img/img4.jpg") no-repeat left top;
  padding: 10px;
  text-align: center;
  color: #fff;
}

如何使用背景起源

“背景原点”指定放置背景图像的基点。在这里,有些人可能想知道它与“背景位置”有何不同。 “背景位置”是元素中的位置指定,但是“背景起源”指定图像的绘制范围,以使其适合“内容”或“填充”。您可以指定是否执行此操作,或者是否适合“边界”。将其视为指定“背景位置”的属性,然后更详细地指定它。

内容框 它具有使图像适合元素内的效果。
填充盒 它具有将图像置于填充中的效果。
边框 它具有将图像置于边框中的效果。

以下值是扩展图像的图像。

让我们检查每个行为。为了理解,我将基于以下基本代码进行解释。处于设置“ padding”,“ margin”和“ border”的状态。

<div class="background-border">
  <div class="background-content"></div>
</div>
.background-border,
.background-content{
  margin: 0 auto;
  display: block;
}

.background-border{
  width: 500px;
  min-height: 300px;
}

.background-content{
  背景图片: url(./img/img4.jpg);
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #fff;
}

内容框

在上面的代码中设置“ 背景起源:content-box;”。

.background-content{
  背景图片: url(./img/img4.jpg);
  背景起源: 内容框;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px solid #ccc;
}

然后,您可以看到图像已排列为适合元素内部。

填充盒

接下来,设置“ 背景起源:padding-box;”。

.background-content{
  背景图片: url(./img/img4.jpg);
  背景起源: 填充盒;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

然后,您可以看到图像已排列成适合于填充的内部。

边框

最后,设置“ 背景起源:border-box;”。

.background-content{
  背景图片: url(./img/img4.jpg);
  背景起源: 边框;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

检查以下内容。图像从边框(外部)开始展开,但边框本身显示。因此,看起来图像有点放大。放置是在边界和边距之间的边界处进行的,但是要记住边界显示仍然存在。

如何使用背景剪辑

“ 背景剪辑属性”是指定背景图像和颜色应显示多远的属性。当您指定“颜色”时,这比图像更容易理解。在颜色的情况下,它表示“要绘画的区域”。对于图像,它具有垂直和水平长度,因此很难理解,但是效果是相同的。在这里,为便于理解,我们指定“ 背景颜色:red;”并检查其行为。

可用值与“ 背景起源”属性完全相同。

内容框 它具有在整个内容中粘贴/绘画图像/颜色的效果。
填充盒 它具有在整个填充中粘贴/绘画图像/颜色的效果。
边框 它具有在整个边界粘贴/绘画图像/颜色的效果。

让我们检查每个行为。在此,根据以下代码指定颜色而不是图像。

.background-content{
  背景颜色: red;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

内容框

指定“背景剪辑:内容框;”。

.background-content{
  背景颜色: blue;
  背景剪辑: 内容框;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

然后,您可以看到“内容”已完全着色。

填充盒

接下来,指定“ 背景剪辑:padding-box;”。

.background-content{
  背景颜色: blue;
  背景剪辑: 填充盒;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

然后您可以看到“填充”已完全着色。

让我们一起显示图像。然后,在有颜色的情况下,将其完全填充在填充中,同时根据图像的大小排列图像。最初,“ 背景剪辑”试图显示指定范围内的背景。

边框

接下来,指定“ 背景剪辑:border-box;”。

.background-content{
  背景颜色: blue;
  背景剪辑: 边框;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

颜色会在包括边框在内的范围内扩展,但是会显示边框本身。

通过“ -webkit-background-clip:文本;”进行图像裁剪效果

通过使用此“背景剪辑”,您可以裁剪图像。让我们以字母的形式裁剪图像。制作以下图像。

为此,请使用“ -webkit-background-clip:text;”。请注意,不会显示“ 背景剪辑:text;”。
在如下所示的html代码中,将字符插入显示背景图像的div标签中。

<div class="background-border">
  <div class="background-content">Background</div>
</div>

接下来是CSS,要点是“ -webkit-background-clip:文本;”和“颜色:透明;”。通过设置这两个,可以创建裁剪的图像。

.background-content{
  背景图片: url("./img/img3.jpg");
  -webkit-background-clip: text;
  背景尺寸: 100%;
  背景位置: left top;
  min-height: 240px;
  背景重复: no-repeat;
  margin: 30px;
  padding: 30px;
  text-align: center;
  line-height: 1.5;
  color: transparent;
  font-size: 60px;
  font-weight: bolder;
}

概要

background属性是一个经常使用的CSS属性。特别是,它通常用于图像设置中,因此,即使是初学者也应掌握“重复”和“位置”功能的设置。另外,正如我们在此处看到的,背景的使用非常灵活。诸如“ clip”和“ origin”之类的属性并不经常使用,因此让我们首先掌握如何使用其他属性。逐渐根据需要增加您可以理解的属性。

[对于初学者]仔细解释如何编写CSS(样式表)

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。