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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Appium 简明教程

转载:Appium 简明教程:http://www.testclass.net/appium https://www.cnblogs.com/fnng/p/4540731.html Appium 官网:http://appium.io/ Github 地址:https://github.com/appium/appium 主要包括以下几部分: appium新…

陈俊龙:从深度强化学习到宽度强化学习—结构,算法,机遇及挑战

来源:AI科技评论摘要:如何赋予机器自主学习的能力,一直是人工智能领域的研究热点。强化学习与宽度学习如何赋予机器自主学习的能力,一直是人工智能领域的研究热点。在越来越多的复杂现实场景任务中,需要利用深度学习、…

Web.Config文件配置之数据库连接配置

Web.Config文件以XML形式存在于ASP.NET应用程序中,是ASP.NET应用程序的配置文件,包含程序调试、会话和全球化设置等配置信息,可以直接用记事本打开进行编辑。下面通过实例说明如何配置Web.Config文件。 一、配置Access数据库连接 Access数据库…

pyspider 安装 和 快速开始

From:官方文档 --- 快速开始:http://docs.pyspider.org/en/latest/Quickstart/ pyspider github 地址:https://github.com/binux/pyspider pyspider 官方文档:http://docs.pyspider.org/en/latest/ 爬虫框架 pyspider个人总结&…

【干货】强化学习介绍

作者 | Thomas Simonini编译 | 专知整理 | Yongxi摘要:由于Alpha Go的成功,强化学习始终是人们谈论的焦点。现在Thomas Simonini在国外blog网站上发布了系列强化学习教程,以下是本系列的第一篇,简单介绍了强化学习的基本概念。An …

[VBA] 设置行高和列宽,以及全选单元格

一、用VBA设置行高和列宽 1、将选定区域内各单元格的行高和列宽设置为指定的数值: Sub SetSpecified()With ActiveWindow.RangeSelection.ColumnWidth 2.RowHeight 10End With End Sub2、将选定区域内各单元格的行高和列宽调整为最合适的值: Sub…

爬虫教程( 2 ) --- 爬虫框架 Scrapy、Scrapy 实战

From:https://piaosanlang.gitbooks.io/spiders/content/ scrapy-cookbook :https://scrapy-cookbook.readthedocs.io/zh_CN/latest/index.html 1. 爬虫框架 Scrapy 爬虫框架中比较好用的是 Scrapy 和 PySpider。 PySpider 优点:分布式框架&a…

传粉飞行器是拯救传粉昆虫危机的利器还是毁灭者

来源:陈华燕的科学网博客摘要:近年来科学家陆续发现,传粉昆虫正在面临着重重危机,至少在欧洲和北美已发现传粉昆虫的数量正在逐渐下降。近年来科学家陆续发现,传粉昆虫正在面临着重重危机,至少在欧洲和北美…

字符串比较函数实现,超简单的面试题,回过头来发现原来我的c多么的薄弱

今天某个公司面试&#xff0c;尽管报了个测试类的&#xff0c;但是面试依旧不给力&#xff0c;先是写个字符串比较函数&#xff0c;只判断相等和不相等的情况&#xff0c;当时大概这么写的&#xff1a; #include<stdio.h>bool strCompare(char *str1,char *str2){char *s…

思略特报告解读:智能制造企业如何实现数字化?

来源&#xff1a;亿欧智库摘要&#xff1a;全球制造业已经将数字化运营或者工业4.0提上日程&#xff0c;基于此&#xff0c;思略特调研了1100多为企业高管&#xff0c;了解他们对数字化的看法。根据调研&#xff0c;总结了四大业务生态体系&#xff1a;客户解决方案体系、运营体…

爬虫教程( 4 ) --- 分布式爬虫 scrapy-redis、集群

1、分布式爬虫 scrapy - redis scrapy 分布式爬虫 文档&#xff1a;http://doc.scrapy.org/en/master/topics/practices.html#distributed-crawls Scrapy 并没有提供内置的机制支持分布式(多服务器)爬取。不过还是有办法进行分布式爬取&#xff0c; 取决于您要怎么分布了。 …

京东计划狂招2万人

京东明年招聘2万人&#xff0c;招聘人数是现有7000名员工的近三倍&#xff0c;比百度和腾讯的员工总和还多●京东王恩斌透露&#xff0c;除了技术人才与后备人才外&#xff0c;招聘的很大部分是物流配送人才●京东将在成都、北京、上海、广州自购土地建仓库&#xff0c;成都仓库…

爬虫教程( 5 ) --- Selenium 与 PhantomJS

1. Selenium 中式读法&#xff1a;【 瑟林捏幕 】 Selenium&#xff08; selenium 中文网&#xff1a;http://www.selenium.org.cn/ &#xff09;是一个强大的网络数据采集工具&#xff0c;最初是为了网站自动化测试而开发的&#xff0c;被用来测试 Web 应用程序在不同的浏览器…

详解深度学习的可解释性研究(上篇)

作者 | 王小贱来源 | BIGSCity知乎专栏摘要&#xff1a;《深度学习的可解释性研究》系列文章希望能用尽可能浅显的语言带领大家了解可解释性的概念与方法&#xff0c;以及关于深度学习可解释性工作的研究成果。本文是该系列的第一部分。01深度学习的可解释性研究&#xff08;一…

Office 安装

Office Tool Plus 官网&#xff1a;https://otp.landian.vip/zh-cn/ &#xff1a;https://zhuanlan.zhihu.com/p/486882686 Office Tool Plus 基于 Office 部署工具 (ODT) 打造&#xff0c;可以很轻松地部署 Office。无论你是个体还是团队&#xff0c;Office Tool Plus 都是您…

前瞻性总结:全球未来十年不可不知的10大趋势

来源&#xff1a;混沌大学摘要&#xff1a;无论你身在何处&#xff0c;真正的大趋势必将把地球上每一个人深卷其中&#xff0c;并重构大至国家、城市&#xff0c;小至企业、消费者之间一系列错综复杂的关系。不管你是处于创业模式&#xff0c;还是在大企业里面工作&#xff0c;…

C++ 之 转义字符

反斜杠“\”称为转义字符&#xff0c;该字符并不表示本身&#xff0c;用于在程序中表示那些很难或不能显示的字符&#xff0c;例如如果想要表示字符“\”本身&#xff0c;则应该连续用两个反斜杠。 又例如你想打印输出:hello,"world!" 就不能用 cout<<"he…

爬虫教程( 6 ) --- 爬虫 进阶、扩展

1. 前言 1. 先看一个最简单的爬虫。 import requestsurl "http://www.cricode.com" r requests.get(url) print(r.text)2. 一个正常的爬虫程序 上面那个最简单的爬虫&#xff0c;是一个不完整的残疾的爬虫。因为爬虫程序通常需要做的事情如下&#xff1a; 1&…

阿里商业白皮书:每个企业都要变成一个数据公司

来源&#xff1a;悟空智能科技摘要&#xff1a;通过近百页的阐述&#xff0c;该报告全面而详实地介绍了阿里巴巴云零售服务生态系统的最新进展情况。通过近百页的阐述&#xff0c;该报告全面而详实地介绍了阿里巴巴云零售服务生态系统的最新进展情况。尤其是&#xff0c;通过数…

gps 搜索

gps 生产 gps 制作 gps 导航仪 生产过程转载于:https://www.cnblogs.com/yqskj/articles/2212429.html