CSS的背景background

最新推荐文章于 2023-10-27 17:17:26 发布

小花fafa

最新推荐文章于 2023-10-27 17:17:26 发布

阅读量233

点赞数 1

分类专栏： css学习文章标签： css 前端

本文链接：https://blog.csdn.net/laisy334514/article/details/119236679

版权

css学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.颜色

background-color （默认是transparent ---- 透明的）

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
</style>

<div>背景为蓝色的div</div>

2.图片

background-image : none | url

<style>
    div {
      width: 400px;
      height: 400px;
      background-image: url(../image/头像.jpg);
    }
</style>

<div></div>

3.平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat--重复

<style>
    body {
      background-image: url(../image/小米.png);
      background-repeat: repeat;
    }
</style>

no-repeat ---不重复

<style>
    body {
      background-image: url(../image/小米.png);
      background-repeat: no-repeat;
    }
</style>

repeat-x ---- 沿着x轴重复

<style>
    body {
      background-image: url(../image/小米.png);
      background-repeat: repeat-x;
    }
</style>

repeat-y ----沿着y轴重复

<style>
    body {
      background-image: url(../image/小米.png);
      background-repeat: repeat-y;
    }
</style>

4.位置

background-position : x y; （顺序可换）

x y 可以是方位名词 :top(顶部）| center（居中)| buttom（底部）| left（左侧）| right（右侧）

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      background-image: url(../image/小精灵图.jpg);
      background-repeat: no-repeat;
      background-position: top right;
    }
</style>

<div></div>

x y 是精确单位（顺序不能换）

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      background-image: url(../image/小精灵图.jpg);
      background-repeat: no-repeat;
      background-position: 100px 50px;
    }
</style>

注：如果只指定一个数值，则一定为x坐标，y默认垂直居中

混合单位（x和y顺序不能换）

 <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      background-image: url(../image/小精灵图.jpg);
      background-repeat: no-repeat;
      background-position: 100px top;
    }
</style>

5.背景图像固定（背景附着）

background-attachment : scroll | fixed

当一个有背景图的盒子里面的内容很多会有滚动效果时，背景图默认是scroll会随之滚动，

当我们给其设置为fixed时，再滚动内容时图片不会随之滚动。

可以选择一张图替换如下地址观察效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .big {
      width: 200px;
      height: 150px;
      background-image: url(../image/bg.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      overflow: scroll;
    }

    .small {
      width: 50px;
      height: 50px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
  </div>
</body>

</html>

6.复合写法

background : 颜色地址平铺滚动位置

7.背景色半透明

background : rgba(0,0,0,0.5)

<style>
    body {
      background: url(../image/bg.jpg) no-repeat fixed;
    }

    div {
      width: 400px;
      height: 100px;
      background: rgba(250, 242, 242, 0.3);
      /* color: #fff; */
    }
</style>

 <div>这是一个透明的遮罩层</div>

8.背景缩放

background-size : auto（不缩放） | cover （适应盒子的大小）| contain（完全展示）

auto 很好理解，就是图片按照自身的大小来

<style>
    div {
      width: 400px;
      height: 400px;
      border: 3px solid pink;
      background: url(../image/lightrain.jpg) no-repeat;
      background-size: auto;
    }
</style>

<div></div>

cover 就是图片会自动缩放至填满盒子的大小，可能会导致图片部分位置看不到

将上述代码background-size改成cover

contain 会在能够完全展示自身的情况下将图片放到最大

将上述代码background-size改成contain

小花fafa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的背景background

1.颜色 background-color （默认是transparent ---- 透明的）2.图片 background-image : none | url3.平铺 background-repeat : repeat | no-repeat | repeat-x | repeat-y4.位置 background-position : x y;5.背景图像固定（背景附着） background-attachment : scroll | fixed...
复制链接

扫一扫