CSS 背景设置

在当今的HTML页面中，页面的背景色默认为“白色”，除了少许的表单元素及HTML5规范后才出现的一些新的“功能性”元素标签，其它元素是不具有背景色的（也可以理解为透明的）。要为页面内的元素添加漂亮的“装饰”，让页面表现得更加丰富，区别于人，除了“border”、“outline”、“box-shadow”外，“background”在里面也扮演着相当重要的角色，本章的主要内容就是围绕“background”这个属性进行的。

元素背景
1、背景颜色
background-color 属性主要用于设置元素的背景颜色，可以使用的颜色为Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”

section.t1 { background-color: red; }section.t2 { background-color: #008800; }section.t3 { background-color: rgba(0, 0, 0, 1); }

提示：

1、十六进制颜色参照表：https://yusi123.com/1090.html

2、Webstorm 颜色拾取器：在编辑颜色的位置输入 choose color…

2、背景图片
background-image 用于设置背景图片，在实际运用的过程中需要注意的是背景图片“background-image”是可以和背景色“background-color”共存的，也就是当采用一张“非矩形”的“png图片”作为背景图片时要小心背景色带来的意外影响。

div { background-image: url(images/1.jpg) }

3、背景重复
background-repeat 用于设置背景图片的重复方式。当一张背景图片宽或高小于其元素容器，或用 background-size（后面会讲到）设置宽高小于元素容器的宽高时，背景图片默认会以“平铺”的方式排满整个元素的背景，而该属性正式用于控制图像重复排列方式的，它有以下值：

repeat：默认，以“平铺”的方式排列图片
repeat-x：只在水平方向（X轴方向）进行重复
repeat-y：只在垂直方向（Y轴方向）进行重复
no-repeat：使背景图片不重复

<div class="bg-repeat-wrap"><section class="item repeat"></section><section class="item repeat-x"></section><section class="item repeat-y"></section><section class="item no-repeat"></section>
</div>

.bg-repeat-wrap { text-align: center;}
.bg-repeat-wrap .item {width:  300px;height: 200px;border: 1px solid #808080;display: inline-block;/*设置背景图片*/background-image: url("../images/timor.jpeg");
}
.repeat    { background-repeat: repeat;}
.repeat-x  { background-repeat: repeat-x;}
.repeat-y  { background-repeat: repeat-y;}
.no-repeat { background-repeat: no-repeat;}

4、背景尺寸
background-size 属性用于设置背景图片的大小，主要可以通过四种类型的单位设置：

像素值

可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值，第一个值表示背景图的宽度，第二个值表示背景图的高度，还可以通过设置宽度或高度的其中一个，将另外一个值设置成 auto 达到保持背景图原始图像比例的效果。如：“240px 120px”、“180px auto”或“auto（相当于还原默认的大小）”。

百分比值

用“百分比”作为值，结构和用“像素值”一致，也是两个值，第一个值是相对于元素宽度的百分比值，第二个值是相对于元素高度的百分比。如：“100% 80%”、“100% auto”或“auto 50%”。

contain

自动将背景图像填满元素的其中一边，图像的比例保持不变。

cover

在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪，是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。

<div class="bg-size-wrap"><section class="item px"></section><section class="item percent"></section><section class="item contain"></section><section class="item cover"></section>
</div>

.bg-size-wrap {text-align: center;
}
.bg-size-wrap .item {width:  238px;height: 168px;display: inline-block;margin: 0px 30px;border: 1px solid #808080;background-image: url("../images/sights.jpeg");background-repeat: no-repeat;background-position: center center;
}.bg-size-wrap .px      { background-size: 180px 100px;}
.bg-size-wrap .percent { background-size: 80% 50%;}
.bg-size-wrap .contain { background-size: contain;}
.bg-size-wrap .cover   { background-size: cover;}

5、背景定位
background-position 属性用于设置背景图片在元素内出现的位置。使用这个属性主要分为两类实际情况：第一类情况就是当背景图片的尺寸小于元素尺寸时，通过 ”0“ 或 ”正数值“ 去进行定位；第二类情况就是当背景图片的尺寸大于元素尺寸时，通过 “0”或“负数值”去进行定位。（这是采用“CSS图片精灵（CSS Sprites）”技术来开发项目的时候必用的属性）。

该属性的值有三种形式：

方位英文单词

可以有“left”、“right”、“top”、“bottom”和“center”。用法如：“left top”（默认），设置背景图在元素内的“左上方”；“right bottom”，设置背景图在元素内的“右下方”；“center center”，设置背景图在元素的“中心”。

百分比单位

用法如：“0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；“50% 50%”,，设置背景图在元素内的“中心”；“100% 100%”,，设置背景图在元素内的“右下方”。

像素单位

背景图的“左上角”相对于元素“左上角”偏移的距离，如“10px 20px”，设置背景图“水平向右”偏移10像素，“垂直向下”偏移20像素。

这三种形式去设置背景图片的位置是可以“混搭”的，如：“left 100%”、“50% 70px”、“top 30px”等。不过从代码规范性的角度出发，并不推荐这种“混搭”的方式。

# CSS 背景设置相关推荐

CSS复合选择器，元素的显示模式，CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
CSS -- CSS背景设置总结（纯色背景、背景图片）
文章目录 CSS的背景 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景设置总结 CSS的背景通过 CSS 背景 ...
【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )
文章目录一.背景半透明设置 1.语法说明 2.代码示例一.背景半透明设置 1.语法说明背景半透明设置可以使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是设置黑色背 ...
【CSS】CSS 背景设置 ⑦ ( 背景简写 )
文章目录一.背景简写 1.语法说明 2.代码示例一.背景简写 1.语法说明使用 CSS 样式设置盒子背景时 , 需要设置多个 CSS 样式 , 设置背景图片 , 平铺模式 , 定位方式 ...
移动端css背景设置,css设置背景虚化，vue移动端登录页
先看结果: 1.需要设置两个并列的div,第一个div代表背景部分,第二个div表示内容主体.如下: 代码如下: 欢迎登录登录 2.两个div的css样式如下: 代码如下: .bg-blur { b ...
【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
文章目录一.背景位置 1.语法说明 2.注意事项二.背景位置-方位值设置 1.效果展示 2.完整代码示例一.背景位置 1.语法说明如果盒子的大小大于背景图片的大小 , 默认的图片位置 ...
【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top； )
文章目录一.超大背景图片设置 1.超大背景图片问题 2.超大背景图片默认显示 3.超大背景图片推荐定位方式 4.超大背景图片编辑策略二.代码示例 1.背景图片展示 2.代码示例 3.展示效果一. ...
【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )
文章目录一.盒子中图片对齐操作 1.设置 div 盒子 2.设置背景图片 3.设置图片平铺 4.设置图片平铺二.完整代码示例 1.代码示例 2.显示效果一.盒子中图片对齐操作实现博客中的如下效 ...
css背景设置，让套图中某张图片居中显示的例子
曾经实现过,但忘记了,今天再次实现出来,赶紧发个博文,留存备用 <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xh ...

# CSS 背景设置

CSS 背景设置

# CSS 背景设置相关推荐

最新文章

热门文章