CSS 入门教程(6)：浮动和背景

css 评论

CSS 浮动

float 属性用于定位和格式化内容。

例如，让图像在容器中浮动到文本的左侧。

float 属性可以具有以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动到其容器的右侧
  • none - 元素不浮动（将显示在文本中出现的位置）。

float：none；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1>This is a block</h1>
<p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod amet minima
    ea ex doloremque quisquam iste saepe hic rerum, corrupti, harum quam optio
    quia asperiores voluptate! Et quaerat ducimus amet. Lorem ipsum, dolor sit
    amet consectetur adipisicing elit. Blanditiis ea necessitatibus dolor
    maiores suscipit culpa. Ipsum exercitationem sapiente dolorem tenetur neque
    dolore, praesentium beatae sit eligendi aliquam laboriosam deserunt
    nesciunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
    eaque libero voluptas provident, soluta aliquid aspernatur maiores, nobis
    aperiam consectetur suscipit, ipsum tempora totam pariatur. Pariatur a enim
    officia quo! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse
    suscipit assumenda distinctio perferendis! Sapiente asperiores, at vel
    earum, repudiandae, modi totam explicabo provident id facilis necessitatibus
    rerum minima voluptate doloremque?
</p>
1
2
3
4
5
6
7
8
9
10
h1 {
    background-color: red;
    margin: 5px;
    padding: 10px;
    width: 100px;
    height: 100px;
    font-size: 20px;
    border: solid;
    float: none;
}

css-float-1.png

float: left;

1
2
3
4
5
6
7
8
9
10
h1 {
    background-color: red;
    margin: 5px;
    padding: 10px;
    width: 100px;
    height: 100px;
    font-size: 20px;
    border: solid;
    float: left;
}

css-float-2.png

float: right;

1
2
3
4
5
6
7
8
9
10
h1 {
    background-color: red;
    margin: 5px;
    padding: 10px;
    width: 100px;
    height: 100px;
    font-size: 20px;
    border: solid;
    float: right;
}

css-float-3.png

背景

背景颜色属性指定元素的背景颜色。

1
2
3
div {
    background-color: lightgray;
}

我们还可以使用 opacity 属性来指定元素的不透明度/透明度。它可以取 0.0 - 1.0 之间的值。值越低，透明度越高：

1
2
3
4
5
6
7
8
div {
    background-color: gray;
    opacity: 0.2;
    padding: 10px;
    width: 100px;
    height: 100px;
    font-size: 20px;
}

css-bg-1.png

background-image

background-image 属性指定用作元素背景的图像。

1
2
3
4
5
div {
    background-image: url("example.jpg");
    background-position: center;
    background-size: cover;
}

background-position 属性可以具有以下值：

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

如果你仅指定一个关键字，则另一个值将为“center”

background-size: cover; 缩放背景图像，使内容区域完全被背景图像覆盖（其宽度和高度等于或超过内容区域）。

线性渐变

线性渐变可让你在两个或多个指定颜色之间显示平滑过渡。

1
2
3
4
div {
    background-image: linear-gradient(black, lightgray);
    height: 400px;
}

css-bg-2.png

组合

可以组合多种背景属性来获得炫酷的图像效果。

1
2
3
4
5
div {
    background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)),
        center top / cover url("montain.jpg") fixed;
    height: 400px;
}

css-bg-3.png

相关文章：

WilliamWeb Full Stack developer

致力于网站建设与Web开发。喜欢新事物，关注前后端动态，对新的技术有追求， 做一个优秀的web全栈工程师。