PHP全栈开发(八):CSS Ⅲ background
设置背景颜色:
div
{
background-color:#b0c4de;
}
不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色
设置背景图片:
body
{
background-image:url('image/bg1.gif');
}
url后面跟的是背景图片的路径。
假如我们的背景图片是一个小方块,那么这个小方块默认情况下会沿着X轴和Y轴平铺过去。
但是有些图片是沿着Y轴渐变的,那么沿着Y轴平铺的话,会显得很怪异。
所以我们可以设置这个背景图片只沿着X轴平铺,用一下这段代码:
body
{
background-image:url('image/bg2.gif');
background-repeat:repeat-x;
}
表示只沿着x轴平铺,repeat-y表示只沿着y轴平铺
如果你不想让图片平铺,就使用
body
{
background-image:url('image/bg2.gif');
background-repeat:no-repeat;
}
有的图片,假如我们放在最上面,那么随着页面的滚动,它就没有了。
当然我们不希望这种情况发生!我们希望它一直在那不动 !!
我们如何做到呢,用下面的代码:
body
{
background-image:url('image/a1.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:fixed;
}
首先我们定义一个小一点的图片作为背景。
然后这个图片当然是不能平铺啦,把图片默认的平铺的属性去掉。
然后我们把它的位置放在最上方的中间。
然后这里 background-attachment 的值是 fixed 就表示是固定的
background-attachment的属性值一共有三种,一种是scroll,表示跟随页面滚动,如果不设置的话,默认是这个。
一种是fixed,表示是固定的。
还有一种是inherit表示从父元素继承。
我们看到上面还有一个属性我们没有介绍,就是background-position
这个表示背景图片所在的位置,可以设置成如下属性值:
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
分别是水平坐标值和垂直坐标值。如果只指定一项的话,那么另一项默认是center
除了可以指定这些位置之外,还可以用css里面通用的一些单位来指定图片的位置
比如说水平和垂直的百分比%和像素px都可以
body
{
background-image:url('image/a1.jpg');
background-repeat:no-repeat;
background-position:1000px 500px;
background-attachment:fixed;
background-size:200px;
}
上面代码指定的position基本上是网页的右下角了。
还有一个我们在指定背景图片的时候经常遇到的问题。
就是我们在设置背景图片的时候,常常下载的图片很大,像素很高,如果按照图像原来的像素比例输出的话,那么对于我们的网页是不合适的。
我们需要重新放到PS或者其他软件里面进行图片像素的调整吗?
这个是很麻烦的。同样CSS提供了设置背景图片大小的属性
就是上面设置的 background-size
这个属性的值有如下几个,一个是CSS通用的单位,百分比%或者像素px都可以。
这个background-size的属性我们在css教程的首页是看不到了,我们要到css参考手册里面去看css的属性,那里列出了css的全部属性,供我们参考。
当然background除了这些常用的属性之外,还有其他少量不常用的属性,都可以在css属性列表里去查。
今天我们的CSS background属性的讲解就到这里。
我们回顾一下这节所讲的内容background,这个是用来设置各种标签的背景的,背景可以是纯颜色,也可以是图片。如果是图片的话还提供了图片的位置,大小,是否随网页移动等属性值可以设置,可以说是非常全面了。但是始终要记得这是背景设置属性,而不是图片属性。
今天的内容就到这里吧。
PHP全栈开发(八):CSS Ⅲ background的更多相关文章
- Python全栈开发:css引入方式
css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...
- Python 全栈开发八 文件处理
一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...
- 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...
- Python 全栈开发【第0篇】:目录
Python 全栈开发[第0篇]:目录 第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...
- .NET全栈开发工程师学习路径
PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈开发【基础一】
Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...
- Meteor全栈开发平台 - 不仅仅是前端
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 全栈开发必备的10款Sublime Text 插件
Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...
- 全栈开发必备的10款 Sublime Text 插件
Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...
随机推荐
- java的访问权限protected和default
protected和default的区别 第一点:在同一个包中,protected和default表现一致,即,当main方法所在的类和使用了protected与default修饰属性.方法的类在同一 ...
- C++ 处理类型名(typedef,auto和decltype)
随着程序越来越复杂,程序中用到的类型也越来越复杂,这种复杂性体现在两个方面.一是一些类型难于"拼写",它们的名字既难记又容易写错,还无法明确体现其真实目的和含义.二是有时候根本搞不 ...
- 发布自己的npm组件库
发布自己的npm组件库 前期准备 **git上建立自己的仓库,这样子是为了在本地初始化时,可以直接生成对应的 package.json ** 克隆仓库 创建仓库成功后,gitbush本地,执行 git ...
- 自定义bean对象实现序列化接口
上一个word count的案例中,我们为了理解mapreduce的流程,写了上面的代码.现在我们要把一个实体类序列化.比如现在有这么一个文件,里面的数据格式是这样的: 第一列是时间戳,第二列是手机号 ...
- devops-2:Jenkins的使用及Pipeline语法讲解
DevOps-Jenkins Jenkins简介 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续 ...
- 文件上传接入阿里云OSS
目的:将文件交给阿里云进行管理,可避免文件对本地服务器资源的占用,阿里云OSS还可根据读写偏好选择合适的文件存储类型服务器,文件异地备份等 一.阿里云OSS基础了解(前提) 1.存储空间(Bucket ...
- Luogu2455 [SDOI2006]线性方程组 (高斯消元)
模板特殊情况没exit(0) $\longrightarrow$60 了一下午 //#include <iostream> #include <cstdio> #include ...
- ZOJ 3537 (凸包 + 区间DP)(UNFINISHED)
#include "Head.cpp" const int N = 10007; int n, m; struct Point{ int x,y; bool operator &l ...
- Luogu3092 [USACO13NOV]没有找零No Change (状压DP)
将金币状压,然后就没多说的了. #include <iostream> #include <cstdio> #include <cstring> #include ...
- BZOJ1787/Luogu4281: [Ahoi2008]Meet 紧急集合
画画图可知,三点\(lca\)必有两相同,\(a,b,c\)距离为\(dis_a + dis_b + dis_c - dis_{lca(a,b)} - dis_{lca(b,c)} - dis_{lc ...