如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在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. 杭电 1114 Piggy-Bank 完全背包问题

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  2. pytoch 安装

    注意替换清华源,否则直接安装速度会很慢. conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud ...

  3. 使用kibana或postman操作Elasticsearch的常用命令

    前言服务器:CentOS-6.7 运行系统:windows10 JDK版本:1.8 Elasticsearch版本:5.6.6 插件:kibana.elasticsearch-head 工具:post ...

  4. ajax相同url和参数,将不会重复发起请求

    IE浏览器下使用GET发送请求时,如果两次请求的地址和参数相同,在不刷新页面的情况下,浏览器会缓存第一次请求的内容,服务端更新后浏览器仍然显示第一次的内容. 解决办法: 一. GET请求URL后加随机 ...

  5. 设计模式课程 设计模式精讲 3-11 合成复用原则coding

    1 课堂概念 1.0 继承关系的选择 1.1 起名 1.2 定义 1.3 组合聚合优缺点 1.4 继承优缺点 1.5 组合聚合区别 2 代码演练 2.1 反例 2.2 正例 3 疑问解答3.1 疑问解 ...

  6. 计算机基础- 序列化(Serialization)和持久化(Persistence)的区别

    参考 https://en.wikipedia.org/wiki/Serialization https://en.wikipedia.org/wiki/Persistence_(computer_s ...

  7. leetcode菜鸡斗智斗勇系列(7)--- 用最小的时间访问所有的节点

    1.原题: https://leetcode.com/problems/minimum-time-visiting-all-points/ On a plane there are n points ...

  8. Web--TypeConverter

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. 关于window.location.href页面跳转的坑

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  10. Django--redis 保存session

    pipenv install django-redis settings.py: # 作为 cache backend 使用配置 使用redis保存session CACHES = { "d ...