repeat y(repeat英语)

张工 2022-06-27 18:43:08 阅读:50
  

background属性

  属性解释

  背景属性是css中广泛使用的一个重要属性。它负责设置盒子的背景图片和颜色。背景是一个复合属性,可分为以下设置:

  背景色设置背景色。

  背景图像设置背景图像地址。

  背景重复设置背景图片如何重复平铺。

  背景位置设置背景图片的位置。

  背景-附件设置背景图片是固定的还是随页面滚动条滚动。

  在实际操作中,我们可以使用background属性将上述所有设置放在一起,也建议这样做,这样性能更高,兼容性更好,如:“background : # 00ff00 URL(bgimage . gif)无重复左中心固定”,其中“# 00ff 00”是设置背景色;“url(bgimage.gif)”是设置背景-图像;“不重复”是设置背景重复;“左居中”是设置背景-位置;“固定”是后台-附件的设置,每个设置项之间用空格隔开,有些设置项可以不写。它将使用默认值。

  示例:

  以下示例使用下面的图像作为背景图像:


CSS  background属性


  1.“background:url(bg.jpg)”,默认设置一个图片地址,图片会从框的左上角展开框。


CSS  background属性


  2.“Background:青色URL(bg.jpg)Repeat-X”,水平平铺框,框的其他部分显示背景色“青色”。


CSS  background属性


  3.“Background:青色URL(bg.jpg)repeat-y”,垂直平铺框,框的其他部分显示背景色“青色”。


CSS  background属性


  4.“Background:青色URL(bg.jpg)不重复”,背景不重复,背景与框的左上角对齐,框的其他部分显示背景色“青色”。


CSS  background属性


  5.“背景:青色URL(bg.jpg)不重复左中”,背景不重复,背景与框的左中对齐。框的其他部分显示背景色“青色”。


CSS  background属性


  6.“背景:青色URL(bg.jpg)不重复右居中”,背景不重复,背景与框的右居中对齐,即背景图片的右侧与框的右侧对齐,框的其他部分显示背景色“青色”。

image/fe7e557850ad4d5fa9593f74119786c4?from=pc" img_width="326" img_height="166" alt="CSS background属性" >


  相关代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px;  } .bg1{background:cyan url(bg.jpg);} .bg2{background:cyan url(bg.jpg) repeat-x;} .bg3{background:cyan url(bg.jpg) repeat-y;} .bg4{background:cyan url(bg.jpg) no-repeat;} .bg5{background:cyan url(bg.jpg) no-repeat left center;} .bg6{background:cyan url(bg.jpg) no-repeat right center;} </style></head><body> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div></body></html>

  例子说明:

  background-position的设置,可以在水平方向设置“left”、“center”、“right”,在垂直方向设置“top”、“center”、“bottom”,除了设置这些方位词之外,还可以设置具体的数值。

  比如说,我们想把下边的盒子用右边的图片作为背景,并且让背景显示图片中靠近底部的那朵花:


CSS background属性


  用上面中间那张图片作为左边那个比它尺寸小的盒子的背景,上面右边的实现效果设置为:“background:url(location_bg.jpg) -110px -150px”,第一个数值表示背景图相对于自己的左上角向左偏移110px,负值向左,正值向右,第二个数值表示背景图相对于自己的左上角向上偏移150px,负值向上,正值向下。

  实现原理示意图:


CSS background属性


  对应代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test background</title> <style type="text/css"> .backshow{ width:320px; height:160px; border:3px solid #333; float:left; margin:10px;  }  .bg{width:94px; height:94px; border:3px solid #666; background:url(location_bg.jpg) -110px -150px; } </style></head><body> <div ></div></body></html>

  理解练习:

  通过雪碧图制作如下布局:


CSS background属性


  

二维码