ch4 背景图像基础

时间：2022-10-23 16:23:06

如果希望网站有一个好看的背景，只需将背景应用于主体元素，即在body上应用background-image，默认情况下浏览器水平和垂直的重复显示背景图像，让图像平铺在整个页面上，可以选择背景图像是垂直平铺、水平平铺、不平铺。
如果希望在网页的开头显示一个人大的品牌图像，且不包含人格信息，是纯表现性的，那么实现的方式是创建一个“钩子”，即为该图像创建一个空div，并给该div设置尺寸与图像相同，指定图像不重复。

#branding{
  width:700px;
  height:200px;
  background-image:url(/img/branding.gif);
  background-repeat:no-repeat;
}

设置背景图像的位置：如下图，假设要在站点的额每个标题上添加一个项目符号

ch4 背景图像基础 
h1{
  padding-left:30px;
  background-image:url(/img/bullet.git);
  background-repeat:no-repeat;
  background-position:left center;
}

　　关键词left、center指出了图像的位置，除了用关键词之外，还可以使用像素或百分数来设置背景图像的位置（faux列中也有同样的定义）。

  • 使用像素设置背景的位置：图像的左上角会定位在距离元素左上角指定像素数的地方。
  • 使用百分数定位：会对图像上的对应点进行定位，例如：将垂直和水平位置设置为20%，那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。
ch4 背景图像基础

使用百分数实现前面的项目符号示例，需要将垂直位置设置为50%，就会使得项目符号图像垂直居中：

h1{
  padding-left:30px;
  background-image:url(/img/bullet.git);
  background-repeat:no-repeat;
  background-position:0 50%;
}

 

标签：

相关文章