HTML5+CSS3_7_背景属性

泠泠七弦上111

已于 2024-08-19 11:24:15 修改

阅读量218

点赞数 3

分类专栏： HTML5+CSS3 文章标签： html5 css3 前端

于 2024-08-05 19:21:14 首次发布

本文链接：https://blog.csdn.net/2301_81057751/article/details/140934864

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景属性</title>
  <style>
    div{
      margin: 100px auto;
      width: 500px;
      height: 500px;

      /* 背景色 */
      background-color: #f9f9f9;

      /* 背景图 */
      background-image: url(suo.png);

      /* 背景图平铺方式 repeat（重复） no-repeat（不重复） repeat-x（水平重复） repeat-y（垂直重复） */
      background-repeat: no-repeat;

      /* 背景图位置 可使用 top、bottom、left、right、center或像素值、百分比值 */
      background-position: right center;

      /* 背景图缩放 可使用cover（完全覆盖元素）、contain（保持图像比列并适应元素）、像素值或百分比值 */
      /* background-size: cover; */

      /* 背景图固定 scroll（默认，随页面滚动） fixed（固定不动） */
      /* background-attachment: scroll; */

      /* 背景复合属性 属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 （空格隔开各个属性值，不区分顺序） */
      /* background: #f9f9f9 url(suo.png) no-repeat right center; */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>