CSS之背景样式

来源：互联网发布：怎么进行网络直播编辑：程序博客网时间：2024/05/01 02:53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>CSS背景色</title><style type="text/css">p{/*背景色*/background:gray;}div{/*背景图片*/width: 470px;height: 424px;background-image:url(bibi.jpg);}.div_1{/*背景水平重复*/width: 600px;height:800px;background-image:url(bibi.jpg);background-repeat:repeat-x;}.div_2{/*背景垂直重复*/width: 600px;height:800px;background-image:url(bibi.jpg);background-repeat:repeat-y;}.div_3{/*背景不允许重复*/width: 600px;height:800px;background-image:url(bibi.jpg);background-repeat:no-repeat;}.div_4{/*背景定位*/background-image:url(bibi.jpg);background-repeat:no-repeat;/*居中background-position:center;*//*右上角background-position:right;*//*中部上方*/background-position:top;/*其他关键词(关键字成双出现)：bottom ==(bottom center 或 center bottom),left == (left center 或 center left)  百分数值：利用百分进行定位  background-position:50% 50%;  长度值：元素内边距区左上角的偏移。  background-position:50px 100px;*/height: 500px;}body{/*背景关联*/background-image:url(bibi.jpg);background-repeat:no-repeat;background-attachment:fixed;}</style></head><body><p>背景色</p><div>背景图片</div><div class="div_1">背景水平重复</div><div class="div_2">背景垂直重复</div><div class="div_3">不允许重复</div><p   class="div_4">背景定位</p></body>

</html>

在学习过程中背景的设置属性多种多样，在使用背景重复（background-repeat:no-repeat/repeat-x/repeat-y）时必须存在引用的背景图片（background-image:url(bibi.jpg)）