CSS教程--CSS背景
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色:
p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:
p {background-color: gray; padding: 20px;}
如需查看本例的效果,可以亲自试一试!
可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
背景图像
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素,不过并不仅限于此。
下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:
a.radio {background-image: url(/i/eg_bg_07.gif);}
如需查看上述例子的效果,可以亲自试一试!
理论上讲,甚至可以向 textareas 和 select 等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点,background-image 也不能继承。事实上,所有背景属性都不能继承。
背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;
}
转载于:https://www.cnblogs.com/JimmyShen/archive/2011/10/09/2203218.html
CSS教程--CSS背景相关推荐
- CSS教程--CSS字体
CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace" ...
- CSS教程--CSS 属性选择器
对带有指定属性的 HTML 元素设置样式. 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性. 注释:Internet Explorer 7 (以及更高版本)在规定 ...
- 最新的CSS教程,可以参考下哦!
CSS教程 CSS是指层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语 ...
- HTML,JS,CSS教程
HTML HTML教程 HTML 基本概念 HTML 基础 Tag HTML 常用格式 HTML 特殊字符 HTML 超链接 HTML 相对和绝对路径 HTML 表格 (Tables) HTML 框架 ...
- word文档css格式化,css教程 word版.doc
css教程 word版 CSS教程 CSS简介 CSS语法 CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属 ...
- html刷新css样式,让IE浏览器即时刷新CSS样式_HTML与CSS教程_电脑知识学习_培训之家...
让IE浏览器即时刷新CSS样式为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,c ...
- html控制h1不让换行的属性,CSS控制H1不换行_HTML与CSS教程_电脑知识学习_培训之家...
CSS控制H1不换行为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,css教程下 ...
- 43个PSD to XHTML,CSS教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- 保姆级教程 CSS 知识点梳理大全,超详细!!!
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
最新文章
- python lol脚本_配台电脑,能玩LOL顶配和能够写一些python脚本能用ps不卡,预算6k到8k?...
- Socket的三个关联函数
- php检测http状态码,php回来HTTP状态码
- Servlet 客户端 HTTP 请求
- python实现windows Service服务程序
- Cookie与Session简介
- 网络安全实验---防火墙实验
- SPA的原理及其实现
- 1.余弦定理、两角和公式公式复习
- COGS2259 异化多肽
- MFC中改变按钮颜色的方法
- Windows10设置挂起(休眠)
- 经典策略之一文读懂网格交易
- 超详细快速入门JavaScript详解(一)
- 产品经理那些事:产品经理五年后的成长
- 小生意汽车配件销售管理软件选型
- 计算机控制接口板设计,计算机控制实验报告(过程接口板设计)
- [乱弹]从一篇新闻看电子杂志的标准化
- telerik学习记录-RadButton(下)
- java初级开发面试题全集(上)
热门文章
- Chapter1-1_Speech_Recognition(Overview)
- LeetCode 670. 最大交换
- 程序员面试金典 - 面试题 16.22. 兰顿蚂蚁(deque模拟)
- LeetCode 380. 常数时间插入、删除和获取随机元素(哈希+vector)
- 数据结构--队列Queue--循环顺序队列
- 使用c++查看linux服务器某个进程正在使用的内存_Linux 系统管理
- linux 树状结构图,linux下tree指令的用法, 树状图列出目录, 树状图逐级列出目录...
- Javascript复习题
- FLAT:中文NER屠榜之作!
- 顶会论文:基于神经网络StarNet的行人轨迹交互预测算法