行业资讯

CSS背景属性是什么及怎么用

发布时间：2022-08-03 17:04:09 作者：iii
来源：亿速云 阅读：174

这篇文章主要介绍“CSS背景属性是什么及怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS背景属性是什么及怎么用”文章能帮助大家解决问题。

CSS背景属性是什么及怎么用

CSS 背景属性

用于属性名CSS 版本浏览器支持
1.在一个声明中设置 所有的背景属性。background1IE8- 不支持多个背景图像。IE7- 不支持"inherit"。
2.背景图像是否 固定或者随着页面的其余部分 滚动。background-attachment1IE 不支持属性值 “inherit”。
3.元素的 背景颜色。background-color1IE 不支持属性值 “inherit”。
4.元素的 背景图像。background-image1IE 不支持属性值 “inherit”。
5.背景图像的 开始位置。background-position1IE 不支持属性值 “inherit”。
6.是否及如何 重复背景图像。background-repeat1IE 不支持属性值 “inherit”。
7.背景的 绘制区域。background-clip3都支持，IE8- 不支持。
8.背景图片的 定位区域。background-origin3都支持，IE8- 不支持。
9.背景 图片的尺寸。background-size3都支持，IE8- 不支持。

1. background 属性: 一次性 集中定义 8个 背景相关属性

<style type="text/css">
    body
    { 
    background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
    }
</style>

CSS背景属性是什么及怎么用

p{

	/*background-image: url(../images/四叶草背景.png);*/
	/*background-repeat: no-repeat;*/


	/*第一个值 水平位置,第二个值 垂直位置*/
	/*background-position: 50px 100px;	*/


    /*背景固定*/
	/*background-attachment: fixed;*/
	/*background-color: yellow;	*/

	background: url(../images/四叶草背景.png) no-repeat 50px 100px;

}

CSS背景属性是什么及怎么用

2. background-color 属性: 元素的 背景颜色 (纯色,范围到 边框区的 外边缘)

/* 关键字 或 颜色名 Keyword values */
background-color: red;
background-color: indigo;

/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */
background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/
background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/
background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/
background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */
background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/
background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) */

/* RGB value */
background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 50% transparent (设置 不透明值)*/

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* 完全不透明 Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent (设置 不透明值)*/

/* 特别的关键字 Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* 全局性的值 Global values */
background-color: inherit;
background-color: initial;
background-color: unset;


CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: pink;    
    background-image: url(../images/四叶草背景.png);    
    background-repeat: no-repeat;

}

CSS背景属性是什么及怎么用

    /*把十六进制 设置了透明值的 红色,最后两位的 33 就是透明值*/
    background-color: #ff000066;
    background-image: url(../images/四叶草背景.png);
    background-repeat: no-repeat;

}

CSS背景属性是什么及怎么用

3. background-image 属性: 背景图像 (范围到 内边距区的 外边缘,不含 边框)

CSS背景属性是什么及怎么用

#lizard{
	background-image: url("../images/lizard.png"), url("../images/star.png");
}

CSS背景属性是什么及怎么用

#lizard{
	background-image: url("../images/四叶草背景.png"), url("../images/lizard.png");
	background-repeat: no-repeat,repeat;
}

CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

/* url()方法, 只要 test.jpg 是图像文件*/
url(test.jpg)  

 /*一个 <gradient> 标签*/
 linear-gradient(to bottom, blue, red) 
 
/*页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可*/
element(#colonne3)       

image(ltr 'arrow.png#xywh=0,0,16,16', red) 
                            /* <url>的一个16x16节，从原来的左上角开始
图像只要arrow.png 是一个支持的图像，否则是一个固体
红色的样布。如果语言是rtl，则图像将水平翻转. */ 
cross-fade(20% url(twenty.png), url(eighty.png)) 
                            /* 交叉褪色的图像，其中20%是不透明的
80%是不透明的. */ 
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)  
                            /* 具有不同分辨率的 图像的选择 */

4. background-attachment 属性: 背景图像的 固定和滚动

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

CSS背景属性是什么及怎么用

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

.bgimg-fixed{
	background-image: url(../images/四叶草背景.png);
	background-attachment: fixed;
	background-repeat: no-repeat;
}
    <p class="bgimg-fixed">《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲，是塔吉克民歌改编而来。影片从真假古兰丹姆 与战士阿米尔的爱情悬念出发，讲述了边疆战士和杨排长 一起与特务假古兰丹姆斗智斗勇，最终胜利的阿米尔和真古兰丹姆 也得以重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。作曲家雷振邦先生的电影音乐常以民间音乐素材构成音乐主题，也有根据民歌改编发展的，所以具有浓郁的民族风格和地区特色。《花儿为什么这样红》本来是一首古老的塔吉克族民歌，后来由雷振邦先生改编成电影《冰山上的来客》插曲。插曲表现的是电影故事中，一名驻守新疆唐古拉山的解放军边防战士，同当地一名姑娘的一段爱情故事。主要参考了一首古老的塔吉克族民间歌曲《古力碧塔》。《古力碧塔》讲述的是一名为商人赶脚的塔吉克青年，爱上了喀布尔城的一位公主，但遭到了反对，青年只能顺着古丝绸之路流浪，把优美凄凉的歌声传遍了所有他路经的地方，最后传回到帕米尔高原他的故乡。</p>

CSS背景属性是什么及怎么用

.bgimg-fixed{
	background-image:url(../images/greenbgimage.jpg), url(../images/四叶草背景.png);
	background-attachment: fixed,scroll;
	background-repeat: no-repeat,repeat-y;
}

CSS背景属性是什么及怎么用

5. background-position 属性: 背景图像的 位置 (先水平,后垂直, 关键词,百分比,长度值)

/* 关键词 Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* 百分比值 <percentage> values */
background-position: 25% 75%;

/* 长度值 <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* 多背景图片的 的位置 Multiple images */
background-position: 0 0, center;

/* 指明 距离 上下左右边缘的 的距离. Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* 全局支持的值 Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png");
    background-repeat: no-repeat;
    /*top = center top */
    background-position: top;

}

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png");
    background-repeat: no-repeat;
    /*10% = 10% 50% */
    background-position: 10%;

}

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png");
    background-repeat: no-repeat;
    /*关键字 不分先后顺序*/
    background-position: right bottom;

}

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png");
    background-repeat: no-repeat;
    /*关键字 不分先后顺序,距离右边缘 10px,距离 下边缘60px */
    background-position: right 10px bottom 60px;

}

CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png"),url("../images/四叶草背景.png");
    background-repeat: no-repeat,no-repeat;
    background-position: right bottom 100px,left 10px bottom 30px;

}

CSS背景属性是什么及怎么用

.bgimg-fixed {

    background-color: #c0c0c0;
    background-image: url("../images/star.png"),url("../images/四叶草背景.png");
    background-repeat: no-repeat,no-repeat;
    background-position: right bottom -30px,left -30px bottom -30px;

}

CSS背景属性是什么及怎么用

6. background-repeat 属性 : 背景图像的 重复方式 (单值,双值,超出部分 裁剪)

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平 horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;
单值等价的双值
repeat-x= repeat no-repeat
repeat-y= no-repeat repeat
repeat= repeat repeat
space= space space
round= round round
no-repeat= no-repeat no-repeat

CSS背景属性是什么及怎么用

示例1: 把背景图像设置成 round space和 round = round round的区别

#lizard{
	/*background-image: url("../images/lizard.png");*/
	background-image: url("../images/四叶草背景.png");
	background-repeat:round space;
}

CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

7. CSS3 background-clip 属性: 背景色/图像 的 绘制/裁剪 区域 (背景 显示的区域)

/* 关键字值 Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

CSS背景属性是什么及怎么用

CSS背景属性是什么及怎么用

    <p id="clipTest">天道酬勤, 是一个汉语成语，读作 tiān dào chóu qín。意思是 上天会按照 每个人付出的勤奋，给予相应的酬劳。多一分耕耘，多一分收获，只要你付出了 足够的努力，将来也一定会 得到相应的收获。出自《周易》中的卦辞。</p>
#clipTest{
	/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/
	margin: 20px;
	border: 10px dashed #000;
	padding: 20px;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;

	/*设置 背景图像 和 背景颜色(作为背景图像的回退)*/
	background-color: #c0c0c0;
	background-image: url("../images/hand.jpg");

	/*设置背景的 绘制/裁剪 区域*/

    /*到 边框区的 外边缘*/
	background-clip: border-box;
	
}
	/*到 内边距区的 外边缘*/
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;

CSS背景属性是什么及怎么用

8. CSS3 background-origin 属性: 背景图像的 原点相对区域 (对 背景色 无效,搭配 background-position )

/* 关键字值 Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

CSS背景属性是什么及怎么用

#clipTest{
	/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/
	margin: 20px;
	border: 10px dashed #000;
	padding: 20px;
	font-size: 1.2em;
	font-weight: bold;
	/*color: transparent;*/
	color: #fff;

	/*设置 背景图像 和 背景颜色(作为背景图像的回退 这里为了看清原点位置,先注释掉)*/
	/*background-color: #c0c0c0;*/
	background-image: url("../images/hand.jpg");
	background-repeat: no-repeat;


	/*背景图像的原点 相对位置*/

	-webkit-background-origin: border-box;
	-moz-background-origin: border-box;
	background-origin: border-box;
}
	-webkit-background-origin: content-box;
	-moz-background-origin:content-box;
	background-origin: content-box;

	

	/*背景图像的位置*/
	background-position:  10px 10px;

CSS背景属性是什么及怎么用

9. CSS3 background-size 属性: 背景图像的 大小 (可定义 宽高)

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

CSS背景属性是什么及怎么用

  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
.gradient-example {
  width: 50px;
  height: 100px;
  background-image: linear-gradient(blue, red);

  /* 不能安全使用的 值形式 Not safe to use */
  background-size: 25px;
  background-size: 50%;
  background-size: auto 50px;
  background-size: auto 50%;

  /* 能安全使用的 值形式 Safe to use */
  background-size: 25px 50px;
  background-size: 50% 50%;
  }
#lizard {
    border: 10px dashed #000;
    /*用渐变 做背景图像*/
    background-image: linear-gradient(yellow,green);
    background-color: #c0c0c0;
    background-repeat: no-repeat;

    /*背景图像的大小*/
    background-size: 300px 100px;
}
#lizard {
    border: 10px dashed #000;
    padding: 10px;
    background-image: url("../images/lizard.png");
    background-color: #c0c0c0;
    background-repeat: no-repeat;

    /*背景图像的大小*/
    /*background-size: 200px;*/
}
只设置 宽度值: background-size: 200px;(按比例缩放)宽高一起设置: background-size: 200px 100px;(按指定值,可能改变比例)
CSS背景属性是什么及怎么用CSS背景属性是什么及怎么用
裁剪式 完全覆盖: background-size: cover;(按比例缩放)不裁剪式 安全覆盖: background-size: contain;(按比例缩放)
CSS背景属性是什么及怎么用CSS背景属性是什么及怎么用

关于“CSS背景属性是什么及怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。

推荐阅读：
  1. css背景属性
  2. css 背景属性详细总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

css

上一篇：CSS定位属性之相对定位relative属性怎么使用

下一篇：JavaScript入门之三种引入方式怎么使用

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号