如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在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%;
}

ch4 背景图像基础的更多相关文章

  1. 精通CSS高级Web标准解决方案(3-1 背景图像与图像替换)

    3.1背景图像基础 3.2图像替换 使用文本的图像并保留文本的方法.

  2. css那些事儿4 背景图像

    background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水 ...

  3. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

  4. DEV winform treelist设置背景图像

    treelist是一个复杂的控件,包括选中行,奇偶行等均可以单独设置显示效果,空白区域上背景图像的代码如下: private void treeList1_CustomDrawEmptyArea(ob ...

  5. 全屏背景:15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  6. 2013-10-25笔记,css: mini-width, 标准居中,样式中*号使用,背景图像位置定位

    mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...

  7. Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  8. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  9. CSS 背景图像 重复图像

    重复图像 background-repeat 属性可以重复图像,这对于小图片来说是福音. background-repeat 属性有6个值: repeat 背景图像在垂直方向和水平方向都重复 repe ...

随机推荐

  1. Qt5基于smtp服务发送电子邮件

    1.设置邮箱 先登录163邮箱,然后在邮箱界面找到设置,在里面开通smtp服务. 这一步比较关键,要开通smtp服务,在开通的过程中会让你输入一个邮箱客户端授权码,这个才是你后面要用到的密码,而不是你 ...

  2. Nexus-vPC与FHRP

    去往vPC的流量,如何可能将会被本地的vPC成员端口所转发.FHRP的行为是被修改的,所有的FHRP路由器都会主动转发从vPC收到的流量.修改结果:如果可能,流量避免使用Peer link,这样创建一 ...

  3. 转专业后补修C语言的一些体会(3)

    1.指针:指针是C语言最为强大的工具之一,有着很多优点,比如可以改善子程序的效率,为动态数据结构提供支持,为C的动态内存分配系统提供支持,为函数提供修改变量值的手段.但指针的使用十分困难.会出现很多意 ...

  4. 如果谷歌浏览器突然打不开网页,而且显示:"网页可能暂时无法连接,或者它已永久性地移动到了新网址,返回ERR_TUNNEL_CONNECTION_FAILED",怎么办?用这个方法,亲试有效!!!

    打开cmd: 依次输入: ipconfig /flushdnsnbtstat –rnetsh int ip resetnetsh winsock reset 效果图 然后我的浏览器就能正常使用了,很有 ...

  5. lc 0224

    目录 ✅ 766. 托普利茨矩阵 描述 解答 cpp py ✅ 566. 重塑矩阵 描述 解答 java py ✅ 637. 二叉树的层平均值 描述 解答 cpp py java 0224 algo ...

  6. linux Shell(待学)

    2. Shell 2.1 简介 shell脚本执行方式Shell 是一个用 C 语言编写的程序,通过 Shell 用户可以访问操作系统内核服务.它类似于 DOS 下的 command 和后来的 cmd ...

  7. linux动态监控dstat&&glances&&psutil&&bottle

    安装dstat yum install dstat 安装glances yum install python-devel pip install glances 如果我们安装了 Bottle 这个 w ...

  8. 【协作式原创】查漏补缺之Golang中mutex源码实现

    概览最简单版的mutex(go1.3版本) 预备知识 主要结构体 type Mutex struct { state int32 // 指代mutex锁当前的状态 sema uint32 // 信号量 ...

  9. win10的guard占内存过高

    转自:https://zhidao.baidu.com/question/1180883495203481459.html win10的guard占内存过高,

  10. WebService-CXF 学习笔记

    什么是CXF Apache CXF = Celtix + Xfire支持多种协议:SOAP1.1,1.2XML/HTTPCORBA(Common Object Request Broker Archi ...