CSS背景图片常见相关属性详解
html零基础必看——html入门，编程就是如此简单
第七章：背景属性
- 1.什么是背景？
- 2.background-color 背景颜色
- 3.background-image 背景图片
- 4.background-repeat 背景图片平铺方式
- 5.背景图片大小
- 6.背景图片位置
- 7.background-attachment 背景图像固定
- 8.背景图片和img标签对比
- 总结
1.什么是背景？
背景：渲染浏览器元素背景层 , background属性用于设置盒子的背景颜色或者背景图片效果等。
- 背景是在内容层的下方，背景与内容的层叠关系3D示意图：
2.background-color 背景颜色
属性值，可参考上章颜色取值法
3.background-image 背景图片
属性值：
- none 默认值，不插入背景图片
- url (“写入路径”) 可用相对路径引入和网络路径引入。
注意：选的背景图片可尺寸比较小的，不然看不出来默认平铺方式。
4.background-repeat 背景图片平铺方式
属性值：
- repeat 默认是背景图片平铺的
- no-repeat 不平铺
- no-repeat 不平铺
- repeat-x 水平方向平铺（左右）
- repeat-y 垂直方向平铺（上下）
<style>.div1{width: 100px;height: 100px;border: 1px solid red;/* 背景色是默认会延伸到边框的下方 */background-color: skyblue;}.div2,.div3,.div4,.div5,.div6{/* 为了便于观察，使几个div变成行内块元素 */display: inline-block;width: 300px;height: 300px;border: 1px solid red;/* background-image 背景图片 属性值：none 默认值，不插入背景图片url ("写入路径") 可用相对路径引入和网络路径引入。选的背景图片可尺寸比较小的，不然看不出来默认平铺方式 */background-image: url(./img/5.jpg);}/* background-repeat 背景图片平铺方式 */.div3{/* repeat 默认是背景图片平铺的 */background-repeat: repeat;}.div4{/* no-repeat 不平铺 */background-repeat: no-repeat;}.div5{/* repeat-x 水平方向平铺（左右） */background-repeat: repeat-x;}.div6{/* repeat-y 垂直方向平铺（上下） */background-repeat: repeat-y;}style>
head>
<body><div class="div1">div><div class="div2">div><div class="div3">div><div class="div4">div><div class="div5">div><div class="div6">div>
body>
效果图：
5.背景图片大小
属性值：
- 分别设置宽高 给数值，或百分比。如，background-size: 100px 100px;分别设置宽高 给数值，或百分比
- cover 等比例缩放直到铺满X轴和Y轴
- contain 等比例缩放直到铺满X或Y轴其中一个（用的比较少）
<title>背景图片大小title><link rel="stylesheet" href="rest.css"><style>div{display: inline-block;border: 1px solid red;background-image: url(./img/2.jpg); }.div1,.div2{width: 300px;height: 300px;}.div3,.div4{width: 500px;height: 500px;}/* background-size背景图片大小 *//* .div1{}原始背景不作改变 */.div2{/* 分别设置宽高 给数值，或百分比，*/background-size: 100px 100px;}.div3{/* cover 等比例缩放直到铺满X轴和Y轴； */background-size: cover;}.div4{/* contain 等比例缩放直到铺满X或Y轴其中一个； */background-size: contain;}style>
head>
<body><div class="div1">div><div class="div2">div><div class="div3">div><div class="div4">div>
body>
效果图：
6.背景图片位置
属性值：
background-position:X Y; X和Y默认是：0 0。默认是位于左上方
- x允许取值的方式：left左对齐 center水平居中 right右对齐；百分比，px
- Y允许的取值方式：top顶部对齐 center垂直居中 bottom底部对齐；百分比，px
- 如果只给一个值，那么第二个值默认center（50%）
X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。
<head><title>背景图片位置title><link rel="stylesheet" href="rest.css"><style>div {display: inline-block;width: 300px;height: 300px;border: 1px solid red;background-image: url(./img/2.jpg);/* 引入背景图片后，设置背景图片大小，不平铺，用以观察背景图片位置 */background-size: 100px;background-repeat: no-repeat;}/*background-position 背景图片位置 *//* .div1{}不作设置，默认是位于左上角 *//* background-position:X Y; X和Y默认是：0 0x允许取值的方式：left左对齐 center水平居中 right右对齐；百分比，pxY允许的取值方式：top顶部对齐 center垂直居中 bottom底部对齐；百分比，px如果只给一个值，那么第二个值默认center（50%）;X轴的值和Y轴的值如果给的是方位（单词）值，可以交换顺序。*/.div2 {/* background-position: 100px 50px; *//* background-position: 100px bottom; */background-position: right top;}.div3 {/* 如果只给一个值，那么第二个值默认center（50%） *//* background-position: 100px; *//* background-position: center; *//* 背景位置的拆分写法 *//* 水平背景的位置 */background-position-x: 100px;/* 垂直背景位置 */background-position-y: 0px;}style>
head><body><div class="div1">div><div class="div2">div><div class="div3">div>
body>
效果图：
7.background-attachment 背景图像固定
- background-attachment: fixed 背景不随滚动而滚动
- background-attachment：scroll; 默认值，背景随滚动而滚动
<head><title>背景图像固定title><link rel="stylesheet" href="rest.css"><style>body {background-image: url(./img/2.jpg);/* 让背景图充满整个屏幕 */background-size: cover;/* background-attachment: fixed 背景不随滚动而滚动background-attachment：scroll; 默认值，背景随滚动而滚动； */background-attachment: fixed;}style>
head><body><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p><p>背景图片是固定的。尝试向下滚动页面。p>body>8.背景图片和img标签对比
- 背景图片不占用content内容部分，而img标签会占用。
- 背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。
何时使用背景图片，何时使用img标签并没有一个确却的标准规定，可以根据实际情况做选择。
- 如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。
- 如果是确却的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。
总结
上述是本章小编为大家整理的背景属性，特别是背景图片相关属性进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！