[CSS]彻底解释了如何使用背景属性!

“我不知道如何设置背景的价值。”
“你想用背景使用什么?”

如果你开始学习CSS,那么有很多人有这样的问题?

背景可以设置背景或图像,但它不起作用,因为我认为有点困扰。

另一方面,背景是您用作Web设计的属性之一。
换句话说,需要安全地掌握桅杆。

请放心,你有点困难。
背景属性有点意识到,并且不怕意识到这一点。
一定手段,让我们掌握这个机会。

如果您阅读本文,您将能够妥善使用背景!

什么是背景

“背景”是一个CSS属性,允许您更改背景颜色或显示图像。在背景中设置颜色和图像的优点显示为HTML中的元素,使用“显示”等元素,因此可以比放置元素或向下更容易地更容易生效。

与“图像标签”的差异是“图像标签”也将搜索引擎识别为内联元素,但在“背景”中显示的图像被视为设计。因此,最好用您想要识别搜索引擎的HTML,但最好地编写一个没有“背景”的图像,这不是那么重要。

背景属性类型和价值

从“背景 - ”开始有几种类型的背景属性。下表是一个常用的背景属性。您可以设置每个,但您可以在批量中指定它。此外,可以采用的值不同。

背景类型 描述
背景颜色 可以采取十六进制值,例如“RGBA()”或“#FEF4F4”。 在RGBA()的情况下,写入“RGBA(255,255,128,0.4);”,最后的数字是–将值取为1“并更改透明度。
背景图片 设置URL(绝对路径)或URL(相对路径)。 虽然图像设置是常规设置之一,但是可能的两个或多个设置。如果设置 - 同时设置 - 级别,则-image设置将启动。
背景大小 可以设置“封面”,“包含”,“%”,“PX”等。 “封面”沿整个设置范围显示。此外,在维持宽高比后,显示“包含”。在这种情况下,在设置宽度上发生余量的情况,因此使用它时要小心。
背景位置 可以指定此值,例如“PX”和“%”规范和“中心”。 可以设置X轴和Y轴位置。如果要设置x轴和y轴,则设置如背景位置所示:中心(x轴)顶部(y轴);对于一个值,Y轴被认为是“中心”。默认设置左上(左上)。在定位的情况下,它是“中心,左,右,顶部,底部”的值。
背景重复 值可以占用“重复”,“重复X”“重复”“无重复”。 由于初始值是图像的“重复”,因此图像基本上反复显示。您需要设置“无重复”以停止它。设置“无重复”以仅显示一个图像。
背景附件 值采用“滚动”,“固定”和“本地”之一。 “-Antachment”提供功能,例如固定或滚动背景图像。
背景 - 原产地 值采用“边界框”,“填充框”和“内容框”中的三个。 背景 - 原点允许您设置背景图像或背景颜色参考点。参考点可以位于左上角,您可以指定原点是元素的右上角还是填充的右上角,或边框的右上角。
背景剪辑 值采取四个“边界框”,“填充框”,“内容框”和“文本”。 背景剪辑是有​​任何范围的背景图像和背景颜色的图像。 “Content-Box”将背景图像(背景颜色)放置在元素中并将其放置。 “填充盒”在填充中放置背景图像(背景颜色)。 “边界框”将范围延伸到边框外部,并放置背景图像(背景颜色)。

如何使用背景颜色

背景颜色允许您将颜色设置为背景图像。该值是“十六进制值”或“RGB”,并且“RGBA”很常见。 “RGB”和“RGBA”之间的差异是可以设置透明度。此外,如果您没有“-Color”,则不会看到颜色。它还显示“背景:颜色设置”。好吧,让我们实际检查一下。

指定十六进制颜色代码

颜色代码应参考以下链接。通常,如果使用单色,则通常会使用十六进制颜色代码。

色标

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

RGB规范

十六进制颜色代码可以用RGB替换。 RGB是红色(红色),绿色(绿色),蓝色(蓝色)颜色,主要颜色之间的色差的组合。例如,红色是RGB(204,0,0),并且琥珀色是RGB(52,38,89)。
RGB转换工具的颜色代码

以前的紫色代码是RGB()中的以下代码。如果有理解可以写这样的写作,那就没关系。

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

因此,如果要为此颜色添加透明度,请使用RGBA。让我们放一个代表数字末尾的透明度的值。 0是透明的,1相当于十六进制和RGB。在这里,让我们设置“0.2”接近透明。它如下所示:我认为很明显它接近透明。

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

线性梯度规范

现在,背景也可以通过与“背景”颜色设置相关来设置渐变。作为该目的的价值,我们使用“线性梯度”和“径向梯度(圆形梯度)”。这里,颜色代码被设置为“线性梯度(#db245b,#eb7988)”。在这里,您可以设置多种颜色代码。

但是,有一种关注点。 “背景颜色:线性梯度(#db245b,#eb7988);”不要磨损“ - 五彩缤纷”。它不会显示。因此,“背景:线性梯度(#db245b,#eb7988);”

线性梯度(线性梯度)

线性梯度提供线性灰度。您可以设置多个颜色代码,但这一次设置有两个。如果将“右侧”放置,右侧的颜色和左侧会有所不同,如果您写入“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外部文件夹中写入映像文件夹的路径。

.セレクタ{
  background-image: url(画像URL);
}

所以,设置图像。以下指定具有相对路径的图像的位置。将与CSS文件“./”写相同的图层,然后设置较低层次结构。

.background{
  background-image: url("./img/img3.jpg");
  background-color: #DB245B;
  background-size: cover;
  padding: 50px;
  text-align: center;
  color: #fff;
}

接下来,也可以使用绝对路径指定。

.background{
  background-image: url("//www.sample.com/img/image.jpg");
  background-color: #DB245B;
  background-size: cover;
  padding: 50px;
  text-align: center;
  color: #fff;
}

它如下所示:由于任何原因,此图像可能无法看到。在这种情况下,您还应该将背景颜色设置设置在一起。

此图像是可能的,但多个设置是可能的。以下设置设置为“背景图像”,如下所示。 “URL(),URL()”,将图像路径与“,”分开。在下文中,尺寸为50%,使其易于理解,并且还调整该布置。

.background{
  margin-top: 100px;
  background-image: url("./img/img3.jpg"), url("./img/img4.jpg");
  background-size: 50%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  padding: 50px;
  text-align: center;
  color: #fff;
}

如何使用背景大小

背景大小属性可以设置背景宽度。该值可以是“封面”,“包含”,“相对规范(%等)”和“绝对规范(PX)”。
本节介绍“封面”和“包含”。

覆盖 图像以其元素的全宽显示。
包含 显示在图像宽高比上。

“背景:封面”的行为

“盖子”调整宽度,高度,调整尺寸的尺寸。

此设置为“高度”设置。 “绝对规范(PX)”适用于完全显示,但如果没有必要,则可以指定“自动”。

.background{
  background-image: url("./img/img3.jpg");
  background-size: cover;
  padding: 50px;
  text-align: center;
  color: #fff;
}

“背景:包含”的行为

如果设置“背景:”,则优选地保持图像的宽高比如下。也就是说,您要显示的图像是显示的。

因此,边缘将诞生于要显示的元素的宽度。此外,如果您未设置“背景 - 重复:无重复;”,请注意图像将重复。避免它,指定“封面”或“100%”值。

.background{
  background-image: url("./img/img3.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  padding: 50px;
  text-align: center;
  color: #fff;
}

如何使用背景重复

属性重复图像。初始值,执行重复(重复)。为防止它,您需要指定“后台重复:无重复;”。但是,可以考虑一些人在图像显示中使用“重复”效果。但是,这个“背景 - 重复”有一个要使用的场景。

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

看看以下图像。以下不是一个图像。这是重复图像的结果。通过重复和水平地执行小尺寸图像来显示背景图像。重复图像的重复,直到高度指定距离。

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

重复X行为

“Repect-X”表示仅在X轴(水平方向)上的图像。可以看出,图像没有放置在Y轴方向(垂直方向)中,如下图所示。

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

重复y行为

“Repect-Y”将图像重复到Y轴(垂直方向)。可以看出,图像没有放置在X轴方向(水平方向)中,如下所示。

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

如何使用背景位置

Background-possion指定图像的放置开始位置。位置值具有各种设置。

位置由“顶/右/右/左”

可以设置的值是“左上左”。将其组合以指定位置。例如,写入“左上”将放在左上角。让我们考虑大小60%,使其容易理解。

.background{
  background-image: url("./img/img5.png");
    background-position: bottom center;
  background-size: 60%;
  min-height: 400px;
  background-repeat: repeat-y;
  padding: 50px;
  text-align: center;
  color: #fff;
}

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

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

.background{
  background-image: url("./img/img3.jpg");
    background-position: top left;
  background-size: 60%;
  background-repeat: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

定位“%”,“px”

“%”,“PX”规范也可以从右上角指定。但是,如果按数值指定,请指定“前向垂直顺序”。

.background{
  background-image: url("./img/img3.jpg");
  background-position: 30% 20%;
  background-size: 60%;
  background-repeat: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

以下是距离距离为20%的30%的距离。

这对于“PX”规范是相同的。指定“100px 50px”,如下所示:

.background{
  background-image: url("./img/img3.jpg");
  background-position: 100px 50px;
  background-size: 60%;
  background-repeat: no-repeat;
  min-height: 100px;
  padding: 50px;
  text-align: center;
  color: #fff;
}

然后,您可以看到图像垂直向上移动100 px和50px。

如何使用背景附件

Background-附件属性可以指定背景图像是否固定或滚动。值是“滚动”,“固定”和“本地”,但初始值为“滚动”。通常使用通常是“固定”,以设置“滚动”和“固定”。“背景附件”。

滚动 这是一个初始价值。如果滚动屏幕,您也将滚动图像。
固定的 如果滚动屏幕,则修复图像,另一个元素将滚动。

修复设置

背景图像是固定的,并且滚动字符和滚动如下:

来自Gyazo的图像
.background{
  background-image: url("./img/img4.jpg");
  背景附件: fixed;
  background-repeat: repeat;
  background-position: center top;
  padding: 10px;
  text-align: center;
  color: #fff;
}

批量背景规格

设置每个专用属性也很好,但可以指定该值的集体值。例如,让我们设置颜色,图像,图像大小,位置位置,一次“重复”。值设置的顺序没有特别确定。每个值都可以省略。

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

如何使用背景原点

“背景 - 原点”指定放置背景图像的基点。以下是一些与“背景位置”不同的人。 “背景位置”是元素内的位置,但“背景 - 原点”指定图像的绘图范围,它将容纳在“内容”中或“填充”中,您可以指定是否要保留“边境”或更多。在指定“后台位置”后,请考虑制作更详细规范的属性。

内容盒 图像在元素中有效。
填充盒 图像是支付内部填充的效果。
边框盒子 图像具有支付内边界的效果。

以下值是图像传播的图像。

所以,让我们检查每种行为。它将基于以下基本代码来描述以了解理解。设置“填充”,“边缘”和“边框”。

<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{
  background-image: url(./img/img4.jpg);
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #fff;
}

内容盒

设置“背景 - 原点:内容框;”到上面的代码。

.background-content{
  background-image: url(./img/img4.jpg);
  background-origin: content-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px solid #ccc;
}

然后,您可以看到图像以元素的形式放置。

填充盒

接下来,设置“背景 - 原点:填充盒;”。

.background-content{
  background-image: url(./img/img4.jpg);
  background-origin: padding-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

然后,您可以看到图像以填充的形式放置。

边框盒子

最后,设置“背景 - 原产地:边框盒;”。

.background-content{
  background-image: url(./img/img4.jpg);
  background-origin: border-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

请检查以下内容。图像从边框(外部)部署,但显示边框本身。因此,图像看起来像图像略微扩展。部署是博德和边界的边界,但要记住边境剩余的外观是很好的。

如何使用背景剪辑

“background-clip-property”是一个指定如何显示背景图像和颜色的属性。如果图像是指定的,则更容易理解图像。在颜色的情况下,它意味着在任何范围内“绘制颜色”。在图像的情况下,存在长的垂直和水平长度,因此通过理解理解但效果是相同的。在这里,让我们指定背景颜色:红色;“并检查行为。

可以使用的值与“背景 - 原点”属性完全相同。

内容盒 存在将/着色/着色图像/颜色施加到整个元件的效果。
填充盒 粘附/绘制衬垫上的图像/颜色有效果。
边框盒子 存在将/着色/着色图像/颜色应用于整个边界的效果。

所以,让我们检查每种行为。在这里,颜色根据以下代码指定颜色。

.background-content{
  background-color: red;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
}

内容盒

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

.background-content{
  background-color: blue;
  background-clip: content-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

然后,您可以看到颜色完全绘制在“内容”中。

填充盒

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

.background-content{
  background-color: blue;
  background-clip: padding-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

然后,您可以看到颜色完全绘制在“填充”中。

让我们一起显示图像。然后,在颜色的情况下,根据其尺寸放置图像,同时它在填充中完全绘制。最初,“背景剪辑”正在尝试在整个指定范围内查看背景。

边框盒子

接下来,指定“背景剪辑:边框框;”。

.background-content{
  background-color: blue;
  background-clip: border-box;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  border: 10px dotted #ccc;
  text-align: center;
  color: #fff;
}

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

“-webkit-background-clip-close-text”图像的切割效果;

现在,通过使用此“背景剪辑”,可以缩小图像。让我们以字符的形式剪掉图像。制作以下图像。

使用“-webkit-background-clip:text;”为此目的。请注意,“背景剪辑:文本;”未显示。
以下HTML代码包含显示背景图像的div标记中的字母。

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

接下来是CSS,但点是“-Webkit-背景 - 剪辑:文本;”和“颜色:透明;”。您可以通过设置这两个来制作剪切图像。

.background-content{
  background-image: url("./img/img3.jpg");
  -webkit-background-clip: text;
  background-size: 100%;
  background-position: left top;
  min-height: 240px;
  background-repeat: no-repeat;
  margin: 30px;
  padding: 30px;
  text-align: center;
  line-height: 1.5;
  color: transparent;
  font-size: 60px;
  font-weight: bolder;
}

概括

Background属性是经常使用的CSS属性。特别是,“重复”功能和“位置”功能设置是一个很好的属性,使“重复”功能和“位置”功能,特别是在图像设置中,因此更好地掌握初学者。另外,正如我在这里看到的那样,如何使用背景是非常有用的。因为使用诸如“剪辑”或“原点”的属性的频率不是那么高,所以让我们掌握如何先使用其他属性。让我们增加可以根据需要逐步理解的性质。

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

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。