Backgrounds and borders

 

在本课程中,我们将介绍CSS背景和边框可以做的一些创造性的工作. 通过添加渐变,背景图像和圆角,背景和边框是CSS中许多样式问题的答案.

Prerequisites: 基本的计算机知识, 已安装的基本软件使用文件的基本知识,HTML基础(研究HTML简介 )以及CSS的工作原理(研究CSS第一步) .
Objective: 了解如何设置框的背景和边框样式.

Styling backgrounds in CSS

CSS background属性是我们在本课程中将要遇到的许多背景速记属性的简写. 如果您在样式表中发现一个复杂的背景属性,则可能难以理解,因为可以一次传递这么多的值.

.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, 
  url(big-star.png) center no-repeat, rebeccapurple; 
} 

我们将在本教程的后面部分中讨论速记的工作方式,但首先让我们通过查看各个背景属性来了解CSS背景中可以执行的不同操作.

Background colors

background-color属性定义CSS中任何元素的背景颜色. 该属性接受任何有效的<color> . background-color在元素的内容和填充框下方延伸.

在下面的示例中,我们使用了各种颜色值将背景色添加到框,标题和<span>元素中.

使用任何可用的<color>值尝试这些.

Background images

background-image属性可在元素的背景中显示图像. 在下面的示例中,我们有两个框-一个框的背景图像大于该框,另一个框的背景图像较小.

本示例演示了有关背景图像的两件事. 默认情况下,大图像不会按比例缩小以适合该框,因此我们只能看到它的一个小角,而小图像会平铺以填充该框. 在这种情况下,实际图像只是一颗星星.

如果除了背景图像之外还指定了背景色,则图像会显示在该颜色的顶部. 尝试在上面的示例中添加background-color属性,以查看实际效果.

Controlling background-repeat

background-repeat属性用于控制图像的平铺行为. 可用值为:

  • no-repeat -停止完全重复背景.
  • repeat-x水平重复.
  • repeat-y垂直重复.
  • repeat -默认值; 双向重复.

在下面的示例中尝试这些值. 我们将值设置为no-repeat因此您只会看到一颗星星. 尝试不同的值( repeat-xrepeat-y )以查看其效果.

Sizing the background image

在上面的示例中,我们放大了一个大图像,因为它大于背景元素. 在这种情况下,我们可以使用background-size属性(该属性可以使用长度百分比值)来调整图像大小以适合背景.

您还可以使用关键字:

  • cover -浏览器将使图像足够大,使其完全覆盖框区域,同时仍保留其宽高比. 在这种情况下,某些图像可能会出现在盒子外面.
  • contain -浏览器将使图像大小合适以适合盒子内的大小. 在这种情况下,如果图像的长宽比与盒子的长宽比不同,则最终可能会在图像的两侧或顶部和底部出现间隙.

在下面的示例中,我使用了上面示例中的大图,并使用长度单位在框中将其调整大小. 您可以看到这使图像失真.

请尝试以下方法.

  • 更改用于修改背景大小的长度单位.
  • 删除长度单位,然后查看使用background-size: coverbackground-size: contain contains时会发生什么.
  • 如果图像小于框,则可以更改background-repeat的值以重复图像.

Positioning the background image

background-position属性允许您选择背景图像出现在其所应用到的框中的位置. 这使用坐标系,其中框的左上角为(0,0) ,并且框沿水平( x )和垂直( y )轴放置.

注意 :默认background-position值为(0,0) .

最常见的background-position值采用两个单独的值-水平值,然后是垂直值.

您可以使用诸如topright关键字(在background-image页面上查找其他关键字):

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top center; 
} 

长度 ,以及百分比

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: 20px 10%; 
} 

您还可以将关键字值与长度或百分比混合,例如:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

最后,您还可以使用4值语法来指示距框的某些边缘的距离-在这种情况下,长度单位是从其前面的值的偏移. 因此,在下面的CSS中,我们将背景从顶部放置20px,从右侧放置10px:

.box { 
  background-image: url(star.png); 
  background-repeat: no-repeat; 
  background-position: top 20px right 10px; 
} 

使用下面的示例使用这些值,并在框中移动星星.

注意background-positionbackground-position-xbackground-position-y的简写,可让您分别设置不同的轴位置值.

Gradient backgrounds

渐变-用于背景时-就像图像一样,也可以通过使用background-image属性进行设置.

<gradient>数据类型的MDN页面上,您可以了解有关不同类型的渐变的更多信息以及可以使用它们进行的操作. 一种有趣的渐变方式是使用网络上可用的众多CSS渐变生成器之一,例如this . 您可以创建一个渐变,然后复制并粘贴生成渐变的源代码.

在下面的示例中尝试一些不同的渐变. 在这两个盒子中,我们分别具有一个线性梯度,该线性梯度在整个盒子上延伸,以及一个具有设定大小的径向梯度,因此重复进行.

Multiple background images

也可能有多个背景图像-您可以在一个属性值中指定多个background-image值,并用逗号分隔每个background-image值.

当您这样做时,您可能最终会得到彼此重叠的背景图像. 背景将分层,最后列出的背景图像位于堆栈底部,而每个先前的图像堆栈均位于代码后的背景​​图像的顶部.

注意 :可以将渐变与常规背景图像愉快地混合在一起.

其他background-*属性还可以具有与background-image相同的逗号分隔值:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Each value of the different properties will match up to the values in the same position in the other properties. Above, for example, image1's background-repeat value will be no-repeat. However, what happens when different properties have different numbers of values? The answer is that the smaller numbers of values will cycle — in the above example there are four background images but only two background-position values. The first two position values will be applied to the first two images, then they will cycle back round again — image3 will be given the first position value, and image4 will be given the second position value.

让我们玩. 在下面的示例中,我包含了两个图像. 为了演示堆叠顺序,请尝试切换哪个背景图像排在列表的第一位. 或使用其他属性来更改位置,大小或重复值.

Background attachment

我们可用于背景的另一个选项是指定背景在内容滚动时如何滚动. 这是使用background-attachment属性控制的,该属性可以采用以下值:

  • scroll :滚动页面时,导致元素的背景滚动. 如果滚动元素内容,则背景不会移动. 实际上,背景固定在页面上的相同位置,因此背景随着页面滚动而滚动.
  • fixed :使元素的背景固定到视口,以便在滚动页面或元素内容时不滚动. 它将始终保持在屏幕上的相同位置.
  • local :此值是后来添加的(仅Internet Explorer 9+支持此值,而IE4 +支持其他值),因为scroll值相当混乱,在许多情况下并不能真正满足您的要求. local值将背景固定在其设置的元素上,因此,当您滚动该元素时,背景也会随之滚动.

只有在有要滚动的内容时, background-attachment属性才会起作用,因此我们进行了演示以演示这三个值之间的区别-请查看background-attachment.html (另请参见源代码 ).

Using the background shorthand property

正如我在本课开始时提到的那样,您经常会看到使用background属性指定的background . 该简写使您可以立即设置所有不同的属性.

如果使用多个背景,则需要为第一个背景指定所有属性,然后在逗号后添加下一个背景. 在下面的示例中,我们有一个具有大小和位置的渐变,然后是no-repeat的图像背景和位置,然后是颜色.

编写背景图像速记值时,需要遵循一些规则,例如:

  • A background-color may only be specified after the final comma.
  • background-size的值只能在background-position之后立即包含,以'/'字符分隔,例如: center/80% .

在MDN页面上查看background以了解所有注意事项.

Accessibility considerations with backgrounds

将文字放在背景图片或颜色上方时,应注意具有足够的对比度,以使访客可以看清文字. 如果指定图像,并且文本将放置在该图像的顶部,则还应指定background-color ,如果未加载图像,则文本将清晰可见.

屏幕阅读器无法解析背景图像,因此它们应纯粹是装饰性的; 任何重要的内容都应该是HTML页面的一部分,而不应包含在背景中.

Borders

在学习Box Model时,我们发现边框如何影响Box的大小. 在本课程中,我们将研究如何创造性地使用边框. 通常,当我们使用CSS向元素添加边框时,我们会使用简写属性来设置CSS一行中边框的颜色,宽度和样式.

我们可以为带有border的盒子的所有四个边设置border

.box { 
  border: 1px solid black; 
} 

或者我们可以定位框的一个边缘,例如:

.box { 
  border-top: 1px solid black; 
} 

这些速记的单独属性为:

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

对于长手来说:

.box { 
  border-top-width: 1px; 
  border-top-style: solid; 
  border-top-color: black; 
} 

注意 :这些顶部,右侧,底部和左侧边框属性还具有与文档的书写模式相关的映射逻辑属性(例如,从左到右或从右到左的文本,或从上到下). 在下一课中,我们将探讨这些内容,其中包括处理不同的文本方向 .

边框可以使用多种样式. 在下面的示例中,我们对框的四个边使用了不同的边框样式. 玩边框样式,宽度和颜色,看看边框如何工作.

Rounded corners

盒子上的圆角是通过使用border-radius属性和与盒子每个角有关的相关长手来实现的. 可以使用两个长度或百分比作为值,第一个值定义水平半径,第二个值定义垂直半径. 在很多情况下,您只会传入一个值,这两个值都将被使用.

例如,使一个框的所有四个角的半径为10px:

.box { 
  border-radius: 10px; 
} 

或使右上角的水平半径为1em,垂直半径为10%:

.box { 
  border-top-right-radius: 1em 10%; 
} 

我们在下面的示例中设置了所有四个角,然后更改了右上角的值以使其与众不同. 您可以使用这些值来更改角. 查看border-radius的属性页以查看可用的语法选项.

Test your skills!

我们在本文中介绍了很多内容,但是您能记住最重要的信息吗? 在继续进行之前,您可以找到一些进一步的测试来验证您是否保留了此信息-请参阅" 测试您的技能:背景和边框" .

Summary

我们在这里介绍了很多内容,您可以看到在盒子中添加背景或边框有很多. 如果您想了解有关我们讨论的任何功能的更多信息,请浏览不同的属性页. MDN的每个页面上都有更多用法示例,供您使用和增强知识.

在下一课中,我们将了解文档的编写模式如何与CSS交互. 当文本没有从左到右流动时会发生什么?

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS