抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

背景与边框

CSS

发布于：2025年1月6日

CSS的背景样式

backgroud属性是被背景属性的简写表示。

1
2
3
4
5
6
7
8
9
10
11
.box {
    backgroud:
        linear-gradient(
            105deg,
            rgba(255,255,255,0.2) 39%,
            rgba(51,56,57,1) 96%
        )
        center center / 400px 200px no-repeat
    url(image.png) center no-repeat
    rebeccapurple
}

背景颜色

background-color属性定义了CSS中任何元素的背景颜色，属性接受任何有效的color值。background-color可以延伸到元素的内容和内边距盒子的下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="box">
  <h2>背景颜色</h2>
  <p>尝试修改背景<span>颜色</span>。</p>
</div>

<style>
.box {
  padding: 0.3em;
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgb(255 255 255 / 50%);
}
</style>

背景图像

background-image属性可以在一个元素的背景中显示一个图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

<style>
.wrapper {
  display: flex;
}

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.a {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
}

.b {
  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
}
</style>

控制背景平铺行为

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

  • no-repeat： 不平铺
  • repeat-x：水平方向上重复平铺
  • repeat-y：垂直方向上重复平铺
  • repeat：默认值，水平和垂直两个方向重复平铺

调整背景图像的大小

background-size属性，用于设置长度或百分比，用来调整图像的大小以适应背景

  • cover：是图像足够大，能覆盖了盒子区域，同时仍然保持其宽高比
  • contain：浏览器会将图像调整到合适框内的尺寸，这种情况下，如果图像的长宽比和盒子的长宽比不同，可能会在图像的两边或者上下留出空隙

背景图像定位

background-position 属性允许现在图像的位置，是图像左上角在方框的x,y轴位置，默认值是（0，0）。

可以使用top和right这样的关键字，或者长度和百分比，或者将关键字和长度，百分比混合在一起
或者可以采用四值语法来指示到盒子的某些边的距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.box {
    background-image: url(image.png);
    backgroung-repeat: no-repeat;
    background-position: top center;
}

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

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

.box {
  background-image: url(image.png);
  background-repeat: no-repeat;
  /* 长度单位是前面值的便宜量，下面定位在距离顶部20px和右侧10px处 */
  background-position: top 20px right 10px;
}

渐变背景

当使用渐变背景时，也可以使用像图像一样的background-image属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

<style>
.wrapper {
  display: flex;
}

.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #ccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}
</style>

多个背景图像

background-image可以设置多个值，使用逗号分隔开
其他background-*属性也可以像background-image一样使用逗号分隔的方式设置：

1
2
3
4
5
6
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

背景附加

background-attachment属性是用来指定内容滚动时的滚动方式

  • scroll：使元素的背景在页面滚动时滚动。若果滚动了元素内容，则背景不会移动，实际上，背景被固定在页面的相同位置，所以它需要随着页面的滚动而滚动。
  • fixed：使元素的背景固定在视窗上，这样当页面或元素内容滚动时，它就不会滚动，它始终保持在屏幕上相同的位置。
  • local：将背景固定在它所设置的元素上，所以当滚动改元素的时候，背景也随之滚动

background 简写属性

简写形式允许一次设置所有不同的属性。

如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景

background-color只能在最后一个逗号之后指定
background-size值只能立即包含在background-position之后，用”/“字符分隔，例如center/80%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="box"></div>

<style>
.box {
  width: 500px;
  height: 300px;
  padding: 0.5em;
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center
      no-repeat,
    rebeccapurple;
}
</style>

背景的无障碍考虑

当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，你还应该指定一个 background-color，以便在图像未加载时文本也足够清晰。

边框

在学习盒子模型时，边框可以影响盒子大小
border为一个框的所有四条边设置边框,或者只设置一条边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
  border: 1px solid black;
}

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

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

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

圆角

盒子上圆角通过border-radius属性和与盒子的每个角相关的普通属性来实现的。两个长度和或百分比可以作为一个值，第一个值定义水平半径，第二个值定义垂直半径，如果只传入一个值，这个值会被用于这两个值

1
2
3
4
5
6
7
.box {
  border-radius: 10px;
}

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

更新于：2025年1月15日

评论