CSS学习中|关于背景图片background

最新推荐文章于 2023-05-21 21:19:43 发布

美女变成老太婆✿

最新推荐文章于 2023-05-21 21:19:43 发布

阅读量432

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/107044427

版权

CSS基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.背景颜色（background-color）

语法：

background-color:颜色值；

默认值是透明的 transparent

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      
    }
  </style>
</head>
<body>
  <div class="bg">

  </div>
</body>
</html>

样例：

2.背景图片（background-image）

语法：

background-image: url（）；

默认值是none 无背景图

注意：url内不建议加引号

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：（注意背景图是在底层的，文字在其上面）

3.背景平铺（background-repeat）

属性值：

1.no-repeat 不平铺

2.repeat-x x轴横向平铺

3.repeat-y y轴纵向平铺

4.repeat 平铺（默认）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：

4.背景位置（position）重点

语法：

background-position ： length

background-position ： position

注意：

1.必须先指定background：image属性

2.position后面是x坐标和y坐标，可以使用方位名词或者精准单位

3.如果只指定了一个方位名词，另一个值默认居中，为50%

4.如果只制定了一个数值，那该数值用于x坐标，另一个默认为y坐标，默认居中

5.如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top 和 top left 效果一样

6.如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

代码：（图片位置：右上）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
      background-repeat: no-repeat;
      /* background-position: x坐标 y坐标; */
      /* x在右 y在上 则图片在右上 */
      background-position: right top;
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：

代码：（图片位置：水平垂直居中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
      background-repeat: no-repeat;
      /* background-position: x坐标 y坐标; */
      /* x在右 y在上 则图片在右上 */
      /* background-position: right top; */
      /* x居中 y居中 则图片居中 */
      background-position: center center;
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：

代码：（图片位置：水平靠左垂直居中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
      background-repeat: no-repeat;
      /* background-position: x坐标 y坐标; */
      /* x在右 y在上 则图片在右上 */
      /* background-position: right top; */
      /* x居中 y居中 则图片居中 */
      /* background-position: center center; */
      /* 水平靠左 垂直居中 */
      background-position: left center;
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：

代码：（精准数值移动）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 600px;
      height: 500px;
      background-color: cadetblue;
      background-image: url(images/3.jpg);
      background-repeat: no-repeat;
      /* background-position: x坐标 y坐标; */
      /* x在右 y在上 则图片在右上 */
      /* background-position: right top; */
      /* x居中 y居中 则图片居中 */
      /* background-position: center center; */
      /* 水平靠左 垂直居中 */
      /* background-position: left center; */
      /* x :10px y :50px */
      background-position: 10px 50px;
    }
  </style>
</head>
<body>
  <div class="bg">
   1111111111111111111
  </div>
</body>
</html>

样例：

通常背景图片为超大图片时需要水平居中，垂直靠上

background-position: center top;

5.背景附着（背景滚动还是固定）

语法：background-attachment : scroll | fixed

scroll 滚动、背景图像随着内容滚动（默认）

fixed 固定

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   body {
      background-image: url(images/king.jpg);
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: fixed;
   }
  </style>
</head>
<body>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
</body>
</html>

样例：(字可滚动背景一直不动)

6.背景简写

举例：background ： #ccc url（image/1.jpg） no-repeat fixed center top ;

最好按此顺序简写不写则为默认选项

7.背景透明（CSS3 ->低于ie9版本不支持常用）

代码：

最后一个参数是alpha 透明度的意思取值范围在0~1之间

backgroud-color： rbga（0，0，0,0.3）；

注意：

0.3通常会简写为.3

背景半透明指的是盒子半透明，里面的内容（如：图片）不受任何影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .alpha {
      width: 300px;
      height: 300px;
      background-color: rgba(0,0,0,.3);
    }
  </style>
</head>
<body>
  <div class="alpha"></div>
</body>
</html>

美女变成老太婆✿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习中|关于背景图片background

1.背景颜色（background-color）语法：background-color:颜色值；默认值是透明的 transparent代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫