CSS背景background设置

ps酷教程

已于 2023-04-10 21:41:04 修改

阅读量8.1k

点赞数 9

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

于 2022-05-15 15:05:16 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/124782416

版权

前端学习专栏收录该内容

144 篇文章 6 订阅

订阅专栏

笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版

文章目录

1. 背景

back-ground-color

background-color 设置背景颜色

background-image

background-image 设置背景图片（背景图片将会盖在背景颜色上方）
- 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满（图片重复的超出元素的部分将会被裁剪掉）
- 如果背景图片大小大于元素，则背景图片一部分会无法完全显示（图片多余的超出元素部分将会被裁剪掉）
- 如果背景图片大小等于元素，则背景图片会直接正常显示
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

background-origin

background-origin 背景图片的偏移量计算的原点
- border-box 背景图片的变量从边框处开始计算
- padding-box 默认值，background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算

注意：经过测试，它是第一张图片的左上角到元素左上角的距离（第一张的意思是：在图片repeat铺满之前）。如果是border-box，那就是第一张图片的左上角到元素边框靠外面的哪那个左上角的距离。如果是padding-box，那就是到padding靠外面那个左上角的距离。如果是content-box，那就是到content左上角的距离。

background-size

background-size 用来调整背景图像的尺寸大小。
- 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto(即表示第二个值等比例缩放)
- cover 图片的比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示

补充：

background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置）的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。

如：background-size : contain | cover | 100px 100px | 50% 100%;

background-size：contain;      // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover;       // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%;    // 调整图片到指定大小，百分比相对于"包含元素"的尺寸。

思考顺序

先确定图片的偏移起点，即相对于哪里作为偏移起点，默认就是以内边距的左上角作为偏移起点。后面默认会把图片的左上角与偏移起点对齐，并且大小的百分比也要参考起点的位置。

一张图片放入一个元素，然后再确定这个图片的大小，默认就是图片真实的大小。大小如果写成百分比，这个百分比是相对于元素宽高分别而言的百分比，如果只写宽，那么高就是自动，如果写宽和高，那就是分别相对于元素的宽和高而言的，这个图片的大小一旦确定，那么后面不会再影响到图片的大小了。

确定偏移起点后，然后确定图片的位置，即图片的左上角相对于偏移起点在横轴和纵轴方向的偏移量。默认是不偏移，即图片左上角和与偏移起点重合，横轴和纵轴偏移量都是0。如果写成百分比，就是元素的宽度和高度分别减去已确定好大小的图片的宽度和高度大小，再乘以这个百分比，正负号有意义，就是移动的距离。如果只写一个值，那么这个值就水平或纵轴偏移量，另外一个方向上的偏移量就默认成了50%。

然后开始repeat这个图片，然后clip这个图片。

background-position

background-position 设置背景图片的位置
- 通过top-center-bottom，left-center-right这几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量

background-position百分比原理

等价写法

top left, left top                   等价于 0% 0%.
top, top center, center top          等价于 50% 0%.
right top, top right                 等价于 100% 0%.
left, left center, center left       等价于 0% 50%.
center, center center                等价于 50% 50%.
right, right center, center right    等价于 100% 50%.
bottom left, left bottom             等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom           等价于 100% 100%.

background-position百分比计算公式（参考：https://www.cnblogs.com/starof/p/4610984.html）
```
background-postion:x y;
x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
```
示例：

background-position:center center等价于background-position:50% 50% 等价于background-position:?px ?px

例子中用到背景图如下【尺寸：200px*200px】：

在这里插入图片描述

让背景图在容器中居中。

 <style type="text/css">
     .wrap{
         width: 300px;
         height: 300px;
         border:1px solid green;
         background-image: url(img/image.png);
         background-repeat: no-repeat;
         /* background-position: 50% 50%; */
         background-position: center center;
     }
 </style>
 
 <div class="wrap"></div>

效果都是让背景图片居中

在这里插入图片描述

如上通过设置百分比和关键字能实现背景图居中，如果要实现通过具体值来设置图片居中该设置多少？

根据上面公式：

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;
y=(容器的高度-背景图高度)*y百分比=（300px-200px）*50%=50px;

即设置background-postion:50px 50px;

测试一下：

 <style type="text/css">
 .wrap{
     width: 300px;
     height: 300px;
     border:1px solid green;
     background-image: url(img/image.png);
     background-repeat: no-repeat;
     /*  background-position: 50% 50%;      */
     /*  background-position: center center;*/
     background-position: 50px 50px;
 }
 </style>
 
 <div class="wrap"></div>

效果同样居中。

background-repeat

background-repeat 设置背景图片的重复方式
- repeat 默认值，背景图片沿着 x 轴和 y 轴双方向重复
- repeat-x 背景图片沿着 x 轴方向重复
- repeat-y 背景图片沿着 y 轴方向重复
- no-repeat 背景图片不重复

background-clip

background-clip 设置背景的范围（同时控制背景颜色和背景图片的裁剪）
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只出现在内容区和内边距
- content-box 背景只会出现在内容区

background-attachment

background-attachment 背景图片是否跟随元素移动
- scroll 默认值，背景图片会跟随元素移动
- fixed 背景会固定在页面中，不会随元素移动

示例 1

.box1 {
  height: 500px;
  width: 500px;
  overflow: auto;
  border: 20px red double;
  padding: 10px;
  /* 背景色 */
  background-color: darksalmon;
  /* 背景图 */
  background-image: url("/assets/背景.png");
  /* 背景图重复方式 */
  background-repeat: no-repeat;
  /* 背景图偏移位置 */
  background-position: 0 0;
  /* 背景图偏移量计算的原点 */
  background-origin: content-box;
  /* 背景范围 */
  background-clip: content-box;
  /* 背景图片大小 */
  background-size: contain;
}

.box2 {
  width: 100px;
  height: 1000px;
  background-color: orange;
  background-image: url("assets/背景2.jpg");
  background-repeat: no-repeat;
  background-position: 50px 50px;
  /* 背景图片是否跟随移动 */
  background-attachment: fixed;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0yTx9v3-1652598084657) 在这里插入图片描述
(assets/9f806f08854b47c21d02d5c23ed805a7.gif)]

background简写属性

backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的

注意

如果要写background-size，那么background-size必须写在background-position的后边，并且使用/隔开background-position/background-size
background-origin background-clip 两个样式，orgin要在clip的前边

示例 2

.box1 {
  height: 500px;
  width: 500px;
  border: 10px red double;
  padding: 10px;
  background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px
    padding-box content-box;
}

在这里插入图片描述

练习 1：按钮点击效果

代码

<style>
  a:link {
    /* 因为本身是行内元素，变成块元素更方便设置宽高 */
    display: block;
    width: 93px;
    height: 29px;
    background: url("assets/背景/练习2-背景/link.png");
  }

  a:hover {
    background: url("assets/背景/练习2-背景/hover.png");
  }

  a:active {
    background: url("assets/背景/练习2-背景/active.png");
  }
</style>

<a href="javascript:;"></a>

效果

在这里插入图片描述

练习 2：让背景固定不动

在这里插入图片描述

<!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>
        * {
            margin: 0;
        }
        body,html {
            min-width: 1200px; /* 随着浏览器宽度变小, body的宽度至少是1200px */
            background-image: url(./img/bg.jpg);
            background-size: cover; /* 全部覆盖body */
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .box1 {
            width: 1200px;
            height: 400px;
            background-color: #bfa;
        }
        
        [class^=box] {
            opacity: .5;
            margin: 0 auto;
        }
        .box2 {
            width: 1200px;
            height: 400px;
            background-color: rgb(42, 77, 34);
        }

        .box3 {
            width: 1200px;
            height: 400px;
            background-color: rgb(17, 45, 10);
        }

        .box1 {
            width: 1200px;
            height: 400px;
            background-color: rgb(7, 133, 49);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box"></div>
</body>
</html>

ps酷教程

关注

9
点赞
踩
31

收藏

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

笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版文章目录1. 背景back-ground-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackground简写属性练习 1：按钮点击效果练习 2：让背景固定不动1. 背景back-ground-color.
复制链接

扫一扫