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">
  <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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值