📌  相关文章
📜  css 图片 - CSS (1)

📅  最后修改于: 2023-12-03 14:40:20.667000             🧑  作者: Mango

CSS 图片

在 CSS 中，可以使用 background-image 属性来为一个元素添加背景图片。使用背景图片可以让页面更加丰富多彩，并且可以提高用户体验。

语法
selector {
  background-image: url("image.jpg");
}

其中，selector 是要添加背景图片的页面元素，url() 函数用于指定背景图片的路径。

示例

以下代码演示如何在一个 HTML 元素中添加背景图片：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        height: 500px;
        background-color: #f2f2f2;
        background-image: url("https://picsum.photos/id/106/536/354.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

在上面的代码中，我们使用了 background-color 属性来给容器添加一个灰色的背景色。然后，使用 background-image 属性给容器添加了一个叫做 "106" 的 Unsplash 图片作为背景图片。background-repeat 属性被设置为 no-repeat，这样就不会让图片平铺。background-position 属性被设置为 center，这样就可以将图片位置居中。background-size 属性被设置为 cover，这样就可以让图片完整地覆盖整个容器。

结论

添加背景图片可以让网页更加漂亮，而 CSS 中的 background-image 属性可以让我们非常方便地实现这一点。同时，通过其他属性，我们可以控制背景图片的平铺、位置和大小等效果，从而实现更多的样式效果。