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 ...
随机推荐
- AtCoder Beginner Contest 247 E - Max Min // 容斥原理
原题链接:E - Max Min (atcoder.jp) 题意: 给定一个数组,求满足最大值为X且最小值为Y的区间个数. 思路:容斥原理 因为必须要包含端点,直接求是不容易的.因此考虑去求不一定包含 ...
- 多表查询_子查询概述和多表查询_子查询情况1&情况2&情况3
子查询 概念:查询中嵌套查询,称嵌套查询为子查询 -- 查询工资最高的员工信息 -- 1.查询最高的工资是多少 9000 select max(salary) from emp; -- 查询员工信息, ...
- 字符输入流Reader类和FileReader和字符输入流读取字符数据
java.io.Reader:字符输入流,是字符输入流的最顶层的父类,定义了一些共性的成员方法,是一个抽象类 共性成员方法: int read();读取单个字符并返回 int read(char[] ...
- 20220724-Java的继承
目录 含义 代码示例 使用方法和注意事项 个人理解 含义 继承Extends 面向对象最显著的一个特性,继承是从已有的类中派生出新的类,新的类能吸收已有类的性和方法,并能扩展新的能力. 代码示例 cl ...
- 题解 P4999 【烦人的数学作业】
数位 dp. 设 \(dp_{q,i}\)(\(i\in\{0,1,2,3,4,5,6,7,8,9\}\))为 \(1\sim q\) 中 \(i\) 出现的次数,\(1\sim q\) 的数字和显然 ...
- 针对新手 按照使用顺序和频率整理的git常用指令
PS:以下内容中的所有 aaaaaa 均为可替换的自定义内容 git status 查看当前版本状态,判断有没有未提交的变动 git add . 添加到暂存区(注意有个点)git commit -m ...
- YII学习总结3(session)
session操作 <?php namespace app\controllers; use yii\web\Controller; class HelloController extends ...
- 从零开始Blazor Server(8)--增加菜单以及调整位置
这篇干啥 这篇文章主要是把前面的一些东西稍微调整一下,使其更适合后面的内容. 主要是两个事,一个是把原来的PermissionEntity直接变成MenuEntity,直接让最后一级是菜单,这样后面就 ...
- java-前端之css
css样式: <!-- 内联样式:在元素的style属性内写样式 --> <h2 style="color: red;">愿你单枪匹马,亦能所向披靡!< ...
- Warning Please make sure the network configuration is correct!( iaas-install-mysql.sh 脚本)
解读先电2.4版 iaas-install-mysql.sh 脚本 基础服务的操作命令已经编写成shell脚本,通过脚本进行一键安装.如下: # Controller节点 安装 执行脚本iaas-in ...