认识CSS的background（三）

马黑黑 · 发表于 2024-3-10 17:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-11 18:24 编辑

上一讲，我们列出了 background-* 的绝大部分属性都是我们应该掌握的，本节我们就开始进一步认识它们，我们会先了解其中的一部分。下面的代码是我们即将演示的效果的元素背景部分：

#mybox {

background-color: rgba(100,100,0,.5);

background-repeat: no-repeat;

background-position: 10px 10px;

background-size: 84px 84px;

background-attachment: scroll;

}

效果如下：

设置 background-attachment 为 local

点击上面的盒子，会自动生成一千个随机汉字，盒子将出现垂直滚动条。试着翻滚滚动条，看看你认识多少个字——哦不，是看看发生了什么？对，文本翻滚，背景巍然不动。啥原因呢？看代码第7行，background-attachment 使用了 scroll 值配套 overflow 而形成的背景固定不动。如果想让背景图和文本内容一同翻滚，你可以选点效果演示下方的复选按钮感受一下。这里，需要特别注意的是，background-attachment 的默认值是 scroll，随翻滚内容翻滚，但是它是有前提的，元素的 overflow、overflow-x、overflow-y 等三个属性不能设置为 auto 和 scroll，也就是不能让滚动条出现，否则，scroll 的效果等价于 fixed 的效果，而且，这个时候，也就是元素有滚动条的时候，设置 fixed 往往不能出现背景图片，必须设置为 scroll 才行，background 属性值为 local 则不受 overflow 属性设置的影响。这个知识点w3c官网语焉不详，甚至不介绍 fixed 和 overflow 属性的关系，local 这个属性值最多也只是举个栗子，为什么这样原因不明。

下面请回头看看第6行代码，这是设置背景图片大小即 background-size 属性，示例使用的值为84px 84px。为什么要用两个值呢？其实，图片是 84*84 的尺寸，宽高一样，这种情形，用一个值也是可以的，它表示背景图片宽高都是以 84 px 呈现。示例所用的图形形状是圆形，你可以试一试 84px 100px 值，点击这里再回头看看。

background-size 可以使用百分比表示其属性值，例如，50% 60%，当这样使用，表示背景图片以元素宽高尺寸为标准，取其宽度的一半、高度的60%呈现背景图片。你可以试试点这里以50% 60% 改变背景图片大小。这里说明一下互动操作的一些情况：当你尝试使用百分比显示背景图片，再去点击示范例子下方的复选按钮，你会看到背景图片从横向椭圆变为竖向椭圆，或者反过来的变化，这是因为元素有没有文本的原因，当没有文本，元素的高度是CSS预设的尺寸，当有了一千个汉字，元素的高度会被撑开，而背景图片的百分比是依据元素的高度进行渲染的。

background-size 还可以使用关键字来设置其属性值，auto、cover 和 contain，auto 使用图片的原始尺寸，cover 和 contain 都可能会对图片进行缩放，cover 的缩放标准是图片完全覆盖元素背景，图片的一部分会被切割，图形呈现出来不会变形，contain 则完整呈现图片，但元素背景的部分区域可能是空白的，至于图片是否被切割或元素是否留有空白，一切依赖于图片尺寸和元素尺寸的比例关系。

接着请回头看看第5行代码，设置背景位置即 background-position 属性。可以使用像素等实体单位表示其属性值，也可以使用百分比，两者都使用元素的坐标系，即始终以元素的左边和上边为参照，不同的是，使用px等实体单位值时，如果其值刚好等于元素的宽高值，则什么也看不到，但用百分比时，比如100% 100%，图片的右边和下边刚好和元素的右边和下边对齐。有兴趣的朋友可以自己尝试。

background-position 属性也可以使用关键字表示其值，有 left、top、bottom、right 和 center，都是方向性的关键字。

一个非常重要的知识点是，background-position 的值最好成双成对赋值，单值赋值时，其中一个会使用缺省值。

再来看看第 4、3、2 行代码，background-repeat 属性设置图片是否重复，默认（缺省）重复，repeat，或单向重复，repeat-x、repeat-y。

background-image 用于设置背景图片，图片用CSS函数url('图片地址')给出图片地址，凡 img 标签能用的图片它都能用。要注意，论坛中图片地址要用小角单或双引号包裹起来，否则可能会被论坛的ubb解析从而无法正常显示背景图片；如果使用渐变背景做元素的背景图，则使用基于渐变的函数而不是 url() 函数，渐变背景有线性渐变（linear-gradient 和 repeating-linear-gradient）、径向渐变（radial-gradient 和 repeating-radial-gradient）以及角向渐变（conic-gradient，目前浏览器不支持 repeating-conic-gradient），举例如下：

background-color 用来设置元素单纯的背景色，它不受 background-* 这些属性的影响，是独立的存在。

最后，以上这些属性，其实都可以用简写 background 写出来，下面的代码，等价于本节开头对背景设置的多行代码：

background: rgba(100,100,0,.5) url('图片地址') scroll no-repeat 10px 10px / 84px 84px;

//解释

background: 背景颜色背景图片是否固定是否重复图片位置 / 图片大小;

这一讲就讲到这。