css背景属性是用于定义html元素背景的，那么，css背景属性有哪些呢？像是css背景颜色属性，css图片背景属性都属于css背景属性，本文将给大家总结一下css背景属性中相关的属性。
首先，我们来看一下css相关的属性：
background-color: css设置背景颜色
background-image: css设置图片背景
background-repeat: css设置背景图片是否重复及如何重复
立即学习“前端免费学习笔记（深入）”；
background-position: css设置背景图像的位置
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动
background: 简写属性，作用是将背景属性设置在一个声明中
元素背景的范围：
背景会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
浏览器支持：
所有主要浏览器都支持背景属性。
注意： IE7和更早的版本不支持”继承”的值（inherit）。 IE8需要定义!DOCTYPE。 IE9支持”继承”。
css背景颜色：
background-color 属性用来定义元素的背景颜色。
body {background-color: #b0c4de;}
登录后复制
CSS中，颜色值通常以以下方式定义:
十六进制 – 如：#ff0000
RGB – 如：rgb(255,0,0)
颜色名称 – 如：red
默认 – transparent,透明之意。如果一个元素没有指定背景色，那么背景就是透明的。
inherit 从父元素继承背景颜色，这个在IE上存在兼容问题。
css图片背景：
background-image 属性用来定义元素的背景图片。
默认地，背景图片位于元素的左上角，并在水平和垂直方向上重复。
body {background-image: url('paper.gif');}
登录后复制
提示：背景颜色和背景图片是可以共存的，请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
body {background-image: url('paper.gif');background-color:#fff;}
登录后复制
属性值：
none – 默认无背景图片
url(‘image path’) – 图像的可访问路径，可以使用网络地址，相对路径地址，绝对路径地址
inherit – 从父元素继承
css背景重复：
如果需要对背景普片平铺，可以使用background-repeat属性。
body { background-image: url('gradient2.png'); background-repeat: repeat-x;}
登录后复制
属性值：
repeat 导致图像在水平垂直方向上都平铺，默认。
repeat-x 和 repeat-y 分别使背景图像只在水平或垂直方向上重复。
no-repeat 则不允许图像在任何方向上平铺。
inherit 从父元素继承。
css背景定位：
background-position 属性用来控制背景图片的位置，一般配合 background-repeat: no-repeat; 使用。
body { background-image: url('img_tree.png'); background-repeat: no-repeat; background-position: right top;}
登录后复制
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px，最后也可以使用百分数值。
关键词：
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字，一个对应水平方向，另一个对应垂直方向，top right 和 right top 是等效的。
如果只出现一个关键字，则认为另一个关键字是 center。
百分比：
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中：
body { background-image: url('/eg_bg_03.gif'); background-repeat: no-repeat; background-position: 50% 50%;}
登录后复制
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
把一个图像放在水平方向 2/3、垂直方向 1/3 处：
body { background-image: url('/eg_bg_03.gif'); background-repeat: no-repeat; background-position: 66% 33%;}
登录后复制
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
长度值：
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
css背景固定：
background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。
body { background-image:url('image.png'); background-repeat:no-repeat; background-attachment:fixed;}
登录后复制
属性值：
scroll 默认。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 从父元素继承。
简写属性：
background 属性在一个声明中设置所有背景属性。
body { background: #00FF00 url('bgimage.gif') no-repeat fixed top;}
登录后复制
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
相关文章推荐：
你不知道的CSS背景—css背景属性全解
你不知道的CSS背景—css背景属性全解
以上就是CSS背景属性有哪些？css背景属性的总结（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2894544.html
