前端学习第四弹：CSS样式中的背景设置

来源：互联网发布：4.5mm铅弹可淘宝编辑：程序博客网时间：2024/05/16 17:07

打算从今天起实施专题突破，从局部到整体，逐渐搭建起知识框架，这次先来个CSS样式中的背景设置，包括背景颜色/背景图片等，直接上代码：

<html>     <head> <meta charset="utf-8"/>     <style>    body{background-color:"pink"; background-image:url(resume/beijing.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 50%;}.back{background:"red" url(resume/li.png) no-repeat right bottom scroll}.h{background:"yellow" url(resume/li.png) repeat-x  bottom} </style> </head> <body>    <div>    <h2 class="h">测试一下</h2>   <ul class="back">          <li>第一个</li>  <li>第二个</li>  <li>第三个</li>   </ul>    </div> </body></html>

代码都很简单，在<style>中定义了两个类back和h，还对<body>标签进行了设置，从其属性的名字上不难看出，分别是设置背景颜色、背景图片、图片是否重复，图像相对于可视区是否固定、图像在背景中的位置等；当然这些属性也可以简写，就如类back中那样，不过要注意顺序，有些浏览器兼容性不好，经常会出现异常。具体的属性值大家可以参考CSS API，里面介绍的很详细。

可以看到，类h中设置图片水平方向重复，因为只有一行，所以其他几个属性显示不出来，可以比较类black，背景色和右下角的图片都显示了出来，需要注意的是当设置了图片在水平方向重复后，那再设置图片的左右位置则无效，但可以规定其上下的位置，在垂直方向类同。

最后在设置图片的位置时可以使用长度值如10px或10cm，也可以使用百分数，正如上方所示，两个50%即可使图片剧中，另外这两种形式也有区别，长度值代表的是图片左上角的位移，如background-position：50px 60 px；表示图片的左上角将在元素内边距区左上角向右50px，向下60px的位置上（相当于只应用于图片）；而百分数表示法则同时应用于元素和图片，是一种相对位移，二者的具体差别大家可以参考API。

阅读全文

0 0