CSS背景

目录

CSS背景（background）

（1）背景颜色（background-color）

（2）背景图片（background-image）

（3）背景平铺（background-repeat）

（4）背景位置（background-position）

（5）背景附着（background-attachment）

 （6）背景简写

（7）背景颜色透明（CSS3）

（8）背景缩放（CSS3）

（9）多背景（CSS3）

（10）背景颜色渐变（CSS3）

（11）凹凸文字

（12）空心文字

---

CSS背景（background）

CSS可以添加背景颜色和背景图片。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）	background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

（1）背景颜色（background-color）

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

指定背景颜色透明时可使用transparent作为属性值。

语法格式：

background-color: red;
background-color: transparent;  /* 透明 */

（2）背景图片（background-image）

background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

语法格式：

background-image: url('图片路径');  /*设置图片显示*/

示例：

<div id="example1"></div>
#example1 {
    width: 500px;
    height: 300px;
    background-image: url('../img/a1.PNG');
}

（3）背景平铺（background-repeat）

设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。

语法格式：

background-repeat: repeat-y; 

属性值：

值	说明
repeat	背景图像将向垂直和水平方向重复 | 默认值
repeat-x	只有在水平方向会重复背景图像
repeat-y	只有在垂直方向会重复背景图像
no-repeat	不会重复

示例：

background-image: url('paper.gif');
background-repeat: no-repeat;

 课堂案例：王者荣耀导航栏

<a href="#">全新版本</a>
<a href="#">亿万福利</a>
<a href="#">跨界合作</a>
<a href="#">五月天</a>
<a href="#" id="range">排位大事件</a>
<a href="#">KPL明星赛</a>
<a href="#">开黑大数据</a>

body {
	background-color: #595992;
}
a {
	width: 100px;
	height: 100px;
	display: inline-block;
	text-align: center;
	line-height: 100px;
}			
a:hover {
	background: url(img/link_bg.png) no-repeat;
}
a#range:link {
	background: url(img/link_bg.png) no-repeat;
}

（4）背景位置（background-position）

background-position属性设置背景图像的起始位置

第一个值表示水平方向，值增大时，意味着背景图片向右移动 减小 往左

第二个值垂直方向，值增大时，背景图片向下移动，减小往上移动

语法：

/*取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center"*/
/* 水平有left center right, 出垂直有top center bottom */
background-position: center; 关键词
background-position: 30% 20%; 百分比
background-position: 50px 100px; 固定值
background-position: -10% 100px; 混合写


(容器的宽度-图片的宽度)*百分比 = 图片最左边到容器左边的距离
(容器的高度-图片的高度)*百分比 = 图片最上边到容器上边的距离 

（5）背景附着（background-attachment）

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

语法：

background-attachment:fixed;

属性值：

值	说明
scroll	背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）| 默认值
fixed	背景相对于视口固定，不会随着元素的内容滚动。

课堂案例：英雄联盟英雄介绍——大元素使 拉克丝

<p>拉克珊娜·冕卫出身自德玛西亚，一个将魔法视为禁忌的封闭国度。 只要一提起魔法，人们总是带着恐惧和怀疑。 所以拥有折光之力的她，在童年的成长过程中始终担心被人发现进而遭到放逐，一直强迫自己隐瞒力量，以此保住家族的贵族地位。 虽然如此，拉克丝的乐观和顽强让她学会拥抱自己独特的天赋，现在的她正在秘密地运用自己的能力为祖国效力。</p><br />
<p>光芒四射被动技能 拉克丝的伤害类技能会将能量注入敌人的体内，这股能量会持续6秒。 拉克丝的下一次攻击将会点燃这股能量，以对目标造成额外魔法伤害（取决于拉克丝的等级）。</p><br />
<p>光之束缚快捷键：Q 朝目标地点发射一团光球，最多可束缚2个敌方单位2秒并对每个目标造50/100/150/200/250(+0.7)魔法伤害。</p><br />
<p>曲光屏障快捷键：W 朝目标方向掷出拉克丝的魔杖，来保护她自己以及被魔杖触及的所有友方英雄免受50/65/80/95/110(+0.2)伤害，持续3秒。 当魔杖到达它的飞行终点时，就会进行返程，来保护她和被魔杖触及的所有友方英雄免受额外的50/65/80/95/110(+0.2)伤害，持续3秒。 如果去程时命中了一名友方英雄，那么返程提供的护盾值翻倍。</p><br />
<p>透光奇点快捷键：E 创建一个区域，使其中的敌方单位减速25/30/35/40/45%。 在5秒后，该区域会爆炸，对区域内的敌人造成60/105/150/195/240(+0.6)魔法伤害。 再次激活此技能可以提前引爆该区域。</p><br />
<p>终极闪光快捷键：R 拉克丝发射一束耀目的光能射线，对一条直线上的所有敌人造成300/400/500(+0.75)魔法伤害。 如果有敌方英雄在被【终极闪光】命中后的1.75秒内死亡，那么就会返还它30/40/50%的冷却时间。 终极闪光还会引燃并刷新目标身上的光芒四射效果。</p>

<style type="text/css">
	p {
		font-size: 18px;
		line-height: 26px;
	}
	body {
		background-image: url('img/girl.jpg');
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: left top;
	}
</style>

 （6）背景简写

background属性的值书写顺序官方并没有强制标准。不要的可以直接删除。为了可读性，建议如下：

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url('./img/logo.png') repeat-y scroll 50% 0;

（7）背景颜色透明（CSS3）

CSS3支持背景半透明的语法格式：

background: rgba(0, 0, 0, 0.5);

alpha的取值范围在0~1之间

同样可以给文字和边框透明，都是使用rgba的格式来写

color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);

（8）背景缩放（CSS3）

通过background-size设置背景图片的尺寸。其参数设置如下：

1.可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。

当设置一个值时，第二个值为auto，横向展示为设置的值 ， 或者设置的百分比 * 盒子的宽度，纵向会按照原图宽高度等比缩放

/* 假如原图宽高比为 48px * 1194px */
<style>
    li span {
        width: 24px;
        height: 24px;
        background-image: url('./images/sprit.png');
        background-position: 0px 0px;
        background-size: 100%;
    }
/*
background-size: 100%;
	只设置一个值，表示背景图横向宽度为24px, 原图为48px; 24:48 = 0.5表示原图横向缩小一半
	那么纵向将会按照原图宽高比缩放 48/1194 = 24/x ===> x = 597 纵向会变为597px
*/
</style>

2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

等比例缩放图片，直到盒子被完全填充满，那么很显然有一部分会被截取掉

特点：会充满整个盒子，但是图片不一定能够显示完整

 

3.设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域。

只要图片的一边填满了盒子，就止步，不会在继续填充

特点：图片一定能显示完整，但是可能就不能充满盒子

 

 

如果盒子和图片都是正方形，那么contain和cover表现形式一样

background-image: url(../img/blue.jpg);
background-size: 300px 100px;
/*background-size: contain;*/
/*background-size: cover;*/

示例：

<style>
        div {
            width: 600px;
            height: 400px;
            border: 1px solid slateblue;
            background-image: url('./img/3.jpg');
            background-repeat: no-repeat;
​
            /* 背景缩放为固定像素值 */
            background-size: 500px 300px;
​
            /* 背景缩放为百分比 相对于当前盒子的宽高进行计算 */
            /* background-size: 100% 80%; */
​
            /* 只设置一个值时 按照原图宽高比 进行等比例缩放 */
            /* 1280/764 = 500/y ==> y = 298.4375 */
            /* background-size: 500px; */
​
            /* 设置为contain 自动调整缩放比例 将图片完整显示在盒子背景中 */
            /* background-size: contain; */
​
            /* 设置为cover 自动调整缩放比例 盒子背景被图片完全填充 图片可能显示不完整 */
            /* background-size: cover; */
        }
    </style>
</head>
<body>
    <div></div>
</body>

插入图片和背景图片的区别

1. 插入图片在更改图片大小时使用属性 width 和 height ，更改图片位置使用 margin 或 padding 盒模型。

2. 背景图片在更改图片大小时使用 background-size 属性，更改图片位置时使用background-position属性。

3. 一般情况下背景图片适合做一些小图标使用，产品展示之类的就用插入图片

示例：

<section>   <!-- 插入图片 -->
    <img src="img/blue.jpg"/>
    12345   <!-- 插入的图片会将盒子中的文本挤压到图片之后显示-->
</section>
​
<aside> <!-- 背景图片 -->
    12345   <!-- 背景图片则是被当成背景使用，文本还是显示在盒子中背景图片之上 -->
</aside>
section {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
section img {
    width: 300px;   /*插入图片更改大小使用 width 和 height 属性*/
    height: 200px;
    margin-top: 20px;   /*插入图片更改位置可以使用 margin 或 padding 盒模型*/
    margin-left: 50px;
}
            
aside {
    width: 400px;
    height: 400px;
    border: 1px solid goldenrod;
    background: #FFC0CB url(img/blue.jpg) no-repeat;
    background-size: 300px 200px;   /*背景图片更改大小要使用background-size*/
    background-position: 50px 100px; /*背景图片更改位置要使用background-position*/
}
​

（9）多背景（CSS3）

以逗号分隔可以设置多背景，可用于自适应布局。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。前面的会堆叠在后面的上面

background-image:url(图片路径), url(图片路径); /*使用多张图片*/
background-position: left top, right bottom;
background-repeat: no-repeat, repeat;


简写：
background:url('') no-repeat right bottom, url('') repeat;

示例：

<div>
    <h1>悯农</h1>
    <p>锄禾日当午</p>
    <p>汗滴禾下土</p>
    <p>谁知盘中餐</p>
    <p>粒粒皆辛苦</p>    
</div>
div {
    width: 550px;
    height: 500px;
    background-image: url(./img/bq6.png), url(./img/fang.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left top;
    background-size: 50px 50px, 550px 500px;
}

练习案例：

（10）背景颜色渐变（CSS3）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 径向渐变（Radial Gradients）- 由它们的中心定义

A、线性渐变

a. 从上到下的线性渐变     background: linear-gradient(red, blue);

b. 从左到右的线性渐变

/*background: linear-gradient(to left, red, green);*/
/*background: linear-gradient(to right, red, green);*/
/*background: linear-gradient(to right, red, yellow, green);*/
background: linear-gradient(to right, red, yellow, blue, green);

c. 对角方向的线性渐变

background: linear-gradient(to bottom right, red, blue);

B、径向渐变

a. 颜色结点均匀分布的径向渐变   background: radial-gradient(red, green, blue);

b. 颜色结点不均匀分布的径向渐变 background: radial-gradient(red 5%, green 10%, blue 50%);

c. 形状为圆形的径向渐变 background: radial-gradient(circle, red, green, blue);

（11）凹凸文字

<div class="to">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>

body {
    background-color: grey;
    /* background-color: blue; */
    /* background-color: red; */
    /* background-color: green; */
    font: bold 6em "micro"
}           
div {
    margin: 30px;
    color: grey;
    /* color: blue; */
    /* color: red; */
    /* color: green; */
}   
/* 左上阴影为白色，右下阴影为黑色 */
.to {
    text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}
/* 左上阴影为黑色，右下阴影为白色 */
.ao {
    text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}
/* 背景色和文字颜色一样，并且这种颜色需要和阴影的颜色形成色差 看得出视差效果 */

 

 

（12）空心文字

<p>我是空心的文字，酷不酷？</p>

p {
    font-size: 50px;
    /* 伪空心元素，与背景色有关*/
    /* 文字的填充色要与背景颜色一样 */
    -webkit-text-fill-color: white;
    /* 描边色 */
    -webkit-text-stroke-color: blue;
    /*描边宽度 */
    -webkit-text-stroke-width: 2px;
}

 

 

（13）精灵图（雪碧图）

为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图

查到目标图标大小，设置宽高，通过position调整位置，找到目标图标

假如我们的组件的宽高分别为16px，图片宽高为200px，我们发现如果将图片作为组件的背景图片，将会从图片0,0左边点开始显示，只能显示图片的16px，因为组件只有这么大，多余的图片就被舍弃了。如下图片当图片原点和组件原点重叠的时候，组件只能显示图片的16px大小

作用：性能优化

    <style>
        div {
            width: 80px;
            height: 60px;
            background-image: url('./img/sprit.png');
            background-repeat: no-repeat;
            background-position: center 0;
        }
        .box2 {
            background-position: center -88px;
        }
    </style>
    <div class="box1"></div>
    <div class="box2"></div>