认识CSS的background（一）

位置: 首页 > 前端三套件
[发布: 2024.3.8 作者: 马黑阅读: 103]

在CSS中设置元素背景，需要至少五个基于 background 的属性，分别是背景颜色（background-color）、背景图片（background-image）、背景重复与否（background-repeat）、背景尺寸（background-size）、背景位置（background-position），后四个属性都是基于背景图片，意思是，后三个属性都是作用于第二个即背景图片、对背景颜色（background-color）没有影响。

以下代码，基于元素的背景，仅设置了背景图片，这意味着其他属性都是用默认值。为了美观，元素的 width 和 height 必须和图片的实际尺寸一致，同时，为了便于观察，元素设置了1像素的红色实线边框。然后，通过JS的 window.getComputedStyle(element) 来获取元素的五个基于 background 的属性值——默认和缺省值。通过比较、分析源码和JS获取的属性情况，可以大致了解元素的 background 设置。

代码：

<style>

#mydiv {

width: 600px;

height: 338px;

border: 1px solid red;

background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg');

}

</style>

效果：

前一篇: 正则表达式在JS中的构建及实现文本匹配替换
下一篇: 认识CSS的background（二）

发表评论:

评论列表 [1条]

#1 | 知名不具于 2024-3-11 21:44 发布: 这个真需要好好学习一下呢。谢谢黑师。