ch4 背景图像基础
如果希望网站有一个好看的背景,只需将背景应用于主体元素,即在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 背景图像基础的更多相关文章
- 精通CSS高级Web标准解决方案(3-1 背景图像与图像替换)
3.1背景图像基础 3.2图像替换 使用文本的图像并保留文本的方法.
- css那些事儿4 背景图像
background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水 ...
- CSS背景图像位置属性background-position百分比详解
百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...
- DEV winform treelist设置背景图像
treelist是一个复杂的控件,包括选中行,奇偶行等均可以单独设置显示效果,空白区域上背景图像的代码如下: private void treeList1_CustomDrawEmptyArea(ob ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
- 2013-10-25笔记,css: mini-width, 标准居中,样式中*号使用,背景图像位置定位
mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...
- Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- CSS 背景图像 背景图片定位
背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...
- CSS 背景图像 重复图像
重复图像 background-repeat 属性可以重复图像,这对于小图片来说是福音. background-repeat 属性有6个值: repeat 背景图像在垂直方向和水平方向都重复 repe ...
随机推荐
- pillow 初级用法
# 转载至:https://www.cnblogs.com/apexchu/p/4231041.html Image类 Pillow中最重要的类就是Image,该类存在于同名的模块中.可以通过以下几种 ...
- 转专业后对于C语言补修的一些体会(2)
第三章,有以下几个比较重要的点: 1. 强制类型转换. 强制类型转换是C语言中一个十分重要的工具,在C语言的使用中,有很多需要用到强制类型转换的地方,比如在除法中,如果想要得到正确的浮点结果,一般要确 ...
- xml 写sql语句文件头
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...
- Nginx 七层反向代理
目录 1.代理 2.正向代理 3.反向代理 4.Nginx 反向代理 5.Nginx 反向代理相关指令介绍 ①.listen ②.server_name ③.location ④.proxy_pass ...
- http协议学习 —— post请求方法提交application/x-www-form-urlencoded类型的数据格式
先推荐一篇很不错的文章:https://imququ.com/post/four-ways-to-post-data-in-http.html 说一下,如果是自己编写底层,那么要注意了,不能只有提交数 ...
- Mybatis学习day2
Mybatis初探 之前已经用利用mybatis实现链接数据库查询所有用户的信息(用的是在resources下建立和Dao层一样目录的xml实现的).这次再来看一下增删改查等其它的操作. 利用Myba ...
- 算法-leetcode-65-Valid Number
算法-leetcode-65-Valid Number 上代码: # coding:utf-8 __author__ = "sn" """Valida ...
- php的弱类型比较
1.==和=== ==为弱相等,也就是说12=="12" --> true,而且12=="12cdf" --> true,只取字符串中开头的整数部分 ...
- Struts2高级(插件)笔记一
插件 Struts-plugin.xml 说明: Struts-plugin.xml文件是在tomcat服务器启动的时候加载的 该配置文件在classpath的根目录下 在每一个含有plugin字母的 ...
- .NET精彩博文
vs2019安装和使用教程(详细) 为什么选择.NETCore? C#中Socket的简单使用