CSS 设置背景图片_IT分享知识网

大家好，欢迎来到IT知识分享网。

文章目录

本文概念部分参考：CSS背景background设置

设置背景颜色

background-color 设置背景颜色

设置背景图片

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

背景图片偏移量计算原点

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

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

背景图片尺寸

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

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

设置背景图片位置

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

background-position百分比计算公式

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

根据上面公式：

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

效果同样居中。

设置背景图片重复方式

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

设置背景范围

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

设置背景图片是否跟随元素移动

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

测试背景图片

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>设置背景图</title> <style> /* 去掉列表有序或者无序的徽记 */ ul{ 
      list-style-type: none; } /* 设置浮动，改变元素排列顺序 */ li{ 
      /* 设置从左到右排列 */ float: left; /* 每个列表向右偏移 */ margin-right: 30px; /* 每个列表向下偏移 */ margin-top:100px; } /* 设置背景图 */ body{ 
      background-image: url("./image/background.gif"); /* 设置背景图横向排列，不换行 */ background-repeat: repeat-x; background-color:#cccc99; /* 使用红绿蓝三种颜色可以测定颜色 rgb(0~255,0~255,0~255) background-color: rgb(204,204,153); */ } label{ 
      display: block; margin-top: 100px; } input.myinput{ 
      border:solid 2px red; background-color: #ffd3d6; /* 设置波浪线背景图 */ background-image: url("./image/check.gif"); /* 只允许从左往右横向排列一次 */ background-repeat: repeat-x; /* 设置背景图的位置 */ background-position: bottom; } </style> </head> <body> <ul> <li><img src="image/1.jpg" alt="图片错误"></li> <li><img src="image/2.jpg" alt="图片错误"></li> <li><img src="image/3.jpg" alt="图片错误"></li> <li><img src="image/4.jpg" alt="图片错误"></li> </ul> <label for="myinput"> 用户姓名: <input type="text" name="test" class="myinput" placeholder="请输入用户名" id="myinput"/> </label> </body> </html>

效果

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/114538.html

CSS 设置背景图片