13518219792
css代码添加背景图片：
创新互联是一家专业提供万秀企业网站建设,专注与网站制作、成都网站设计、H5网站设计、小程序制作等业务。10年已为万秀众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
1．背景颜色：background-color
语法：{background-color:数值}
注意：在html当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。
表格背影颜色：style="background-color:red"
2．背景图片：background-image
语法：{background-image: url(url)|none}
3．背景重复：background-repeat
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。
说明：参数取值范围：
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4．背景固定：background-attachment
语法：{background-attachment:fixed|scroll}
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
5．背景定位：background-position
语法：{background-position:数值|top|bottom|left|right|center}
作用：背景定位用于控制背景图片在网页中显示的位置。
·带长度单位的数字参数
·top：相对前景对象顶对齐
·right：相对前景对象右对齐
·center：相对前景对象中心对齐
·比例关系
关键字解释如下:
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%
注意：参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。
6. 背景样式：background
语法：{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。
扩展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px* 200px这表示把背景图片大小调整为宽度950像素，高度200像素。
1、background-size的语法说明：
(1)属性名:background-size
(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain
(3)初始值:auto auto
(4)应用于:所有元素
(5)继承性:无
(6)百分比:后面会说明
(7)计算值:根据指定
2、代码说明：
/* 一个值: 这个值指定图片宽度，第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。 */
background-size: auto, auto /* 请区别于background-size: auto auto*/
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
扩展资料：
背景重复：
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景图像将从一个元素的左上角开始。如下：
body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
参考资料来源：w3school：CSS 背景
可以通过cover和contain来对图片进行伸缩。
语法：
background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
扩展资料：
CSS背景图片自适应、全屏、填充、拉伸
方法一：js控制
div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1"
img src="pictures/background.jpg" height="100%" width="100%"/
/div
div id="formbackground" style="position:absolute; z-index:-1;"img src="10.jpg" height="100%" width="100%"//div
script type="text/javascript"
$(function(){
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
});
/script
方法二：全浏览器兼容
.bg{
background:url();
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}
css样式背景图片分开插入：
css中的背景(background)：
CSS2 中有5个主要的背景(background)属性，它们是：
* background-color: 指定填充背景的颜色。
* background-image: 引用图片作为背景。
* background-position: 指定元素背景图片的位置。
* background-repeat: 决定是否重复背景图片。
* background-attachment: 决定背景图是否随页面滚动。
这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。
background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上：
* left
* center
* right
y 轴上:
* top
* center
* bottom
顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：
1、首先在电脑端找到Dw软件，进行打开操作，然后新建一个html文件。
2、新建文件完成之后，写入一个div代码操作，如图所示。
3、写入div代码之后，引入一个css样式，如图代码操作所示。
4、引入样式代码之后，打开引入的css.文件，如图所示。
5、在新引入的css文件中，写入css背景图片代码即可，如图所示。
