博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ch4 背景图像基础
阅读量:4614 次
发布时间:2019-06-09

本文共 908 字,大约阅读时间需要 3 分钟。

如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在body上应用background-image,默认情况下浏览器水平和垂直的重复显示背景图像,让图像平铺在整个页面上,可以选择背景图像是垂直平铺、水平平铺、不平铺。

如果希望在网页的开头显示一个人大的品牌图像,且不包含人格信息,是纯表现性的,那么实现的方式是创建一个“钩子”,即为该图像创建一个空div,并给该div设置尺寸与图像相同,指定图像不重复。

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

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

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

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

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

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

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

 

转载于:https://www.cnblogs.com/lmjZone/p/7738643.html

你可能感兴趣的文章
Python复习基础篇
查看>>
关于Cocos2d-x中背景音乐和音效的添加
查看>>
checkbox和文字对齐
查看>>
%s的用法
查看>>
java中==和equals
查看>>
CCActionPageTurn3D
查看>>
python random
查看>>
esp32-智能语音-cli(调试交互命令)
查看>>
netty与MQ使用心得
查看>>
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结
查看>>
swoolefy PHP的异步、并行、高性能网络通信引擎内置了Http/WebSocket服务器端/客户端...
查看>>
Python学习笔记
查看>>
unshift()与shift()
查看>>
使用 NPOI 、aspose实现execl模板公式计算
查看>>
行为型模式:中介者模式
查看>>
How to Notify Command to evaluate in mvvmlight
查看>>
33. Search in Rotated Sorted Array
查看>>
461. Hamming Distance
查看>>
Python垃圾回收机制详解
查看>>
jquery 编程的最佳实践
查看>>