Css背景

Css背景



1.背景图像:background-image

要把图像放入背景,需要使用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 也不能继承。事实上,所有背景属性都不能继承。


2.关键字

关键字比如:topbottomleftright、和center

关键字可以按任何顺序出现,不过不能超过两个关键字:一个水平方向,一个竖直方向。

如果只出现一个关键字,那么另一个就为center


3.百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:

body

  { 

    background-image:url(‘/i/eg_bg_03.gif’);

    background-repeat:no-repeat;

    background-position:50% 50%;

  }

这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50%的点(中心点)与元素中描述为 50% 50%的点(中心点)对齐。

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3处,可以这样声明:

body

  { 

    background-image:url(‘/i/eg_bg_03.gif’);

    background-repeat:no-repeat;

    background-position:66% 33%;

  }

如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。


4.长度值

长度值的解释是元素内边距区左上角的偏移。偏移点是图像的左上角。





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

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

相关文章

Python小白的数学建模课-11.偏微分方程数值解法

偏微分方程可以描述各种自然和工程现象, 是构建科学、工程学和其他领域的数学模型主要手段。 偏微分方程主要有三类:椭圆方程,抛物方程和双曲方程。 本文采用有限差分法求解偏微分方程,通过案例讲解一维平流方程、一维热传导方程…

Css语法

Css语法 如果值为若干个单词,加引号 p {font-family: “sans serif”;} 多重声明:分号隔开 如果要定义不止一个声明,则需要用分号把声明隔开。如 p {text-align:center; color:red;} 你应该在每行只描述一个属性,这样可以增强…

A4.2021年全国数学建模竞赛A题-赛题分析与评阅要点(FAST主动反射面的形状调节)

Python小白的数学建模课-A4.2021年全国数学建模竞赛A题(FAST主动反射面的形状调节),本文转载竞赛赛题、评阅要点,进行赛题解读和分析。 评阅要点为竞赛组委会官方公布,完整体现了解题思路。 『Python小白的数学建模课…

Css字体

Css字体 使用像素 Firefox,Chrome,and Safari中文本大小可调节,而ie不行 使用em em可以解决在ie中浏览器显示文本的问题。w3c推荐用em作为尺寸单位。 1em等于当前的字体尺寸,如果一个元素的font-size为16像素,那么对…

A5.2021年全国数学建模竞赛B题-赛题分析与评阅要点(乙醇偶合制备C4烯烃分析)

A5.2021年全国数学建模竞赛B题-赛题分析与评阅要点(乙醇偶合制备C4烯烃分析),本文转载竞赛赛题、评阅要点,进行赛题解读和分析。 评阅要点为竞赛组委会官方公布,完整体现了解题思路。 本文首发于 2021年9月8日&#…

emmet插件使用(Css)

emmet插件使用(Css) 渐变 输入lg(left,#fff50%,#000),会生成如下代码 background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -moz-linear-gradie…

Python 小白从零开始 PyQt5 项目实战(1)安装与环境配置

本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始?从软件安装、环境配置开始。 不跳过一个细节,不漏掉一行代码,不省略一个例图。 欢迎关注『Python 小白从零开始 PyQt5 项目实战…

emmet使用(HTML)

emmet使用(HTML) htmlTab直接生成固定标签 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> 分组&#xff1a;可以通过嵌套来快速生成一些代码块 (.foo>h1)(.bar>h2) 隐式标签 在过去的版本中省…

Python 小白从零开始 PyQt5 项目实战(2)菜单和工具栏

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本文详细解读通过 QtDesigner 创建主窗口、菜单栏…

Python 小白从零开始 PyQt5 项目实战(3)信号与槽的连接

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本文讲解信号与槽的连接机制&#xff0c;详细示范…

Css内边距与外边距

Css内边距与外边距 Css内边距 Css外边距margin Css外边距margin 设置外边距最简单的方法就是margin属性。margin属性接受任何长度单位&#xff0c;可以是像素&#xff0c;英寸&#xff0c;毫米或em margin可以设置为auto。更常见的做法就是为外边距设置长度值。下面的声明在h1…

Python 小白从零开始 PyQt5 项目实战(4)基本控件

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 PyQt5 提供了丰富的输入输出控件。本文介绍通过 …

Python 小白从零开始 PyQt5 项目实战(5)布局管理

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 什么叫从零开始&#xff1f;从软件安装、环境配置开始。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 布局管理就是管理图形窗口中各个部件的位置和排列…

Css外边距合并

Css外边距合并 外边距合并是一个相当简单的概念&#xff0c;但是&#xff0c;在实践中对网页进行布局时&#xff0c;它会造成许多混淆。 简单的说&#xff0c;外边距合并指的是&#xff0c;当两个垂直外边距相遇时&#xff0c;它们将形成一个外边距。合并后的外边距的高度等于两…

Python 小白从零开始 PyQt5 项目实战(6)窗口切换的堆叠布局

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。 软件项目中经常需要多种不同的图形界面&#xff0c;以适应不同的任务场景。选项卡控件&#xff08;QTackedWidget&#xff09;通过标签选择打开对应的对话框页面&#xff0c;不需要…

Css链接

Css链接 四种状态 当为链接的不同状态设置样式时&#xff0c;请按照以下次序的规则&#xff1a; a:hover必须位于a:link和a:visited之后&#xff0c;a:active必须位于a:hover之后 文本修饰 text-decoration属性大多用于去掉链接中的下划线 a:link{text-decoration:none;} a:li…

Python 小白从零开始 PyQt5 项目实战(7)折叠侧边栏的实现

单式状态栏&#xff0c;位于于窗口的左右侧边&#xff0c;可以实现软件功能或目录的导航。 本文详细介绍用 QTreeWidget 部件实现目录结构的折叠侧边栏&#xff0c;与用 QToolBox 部件实现垂直菜单结构的折叠侧边栏&#xff0c;通过案例带小白建立两种典型的折叠侧边栏。 至此&…

Css轮廓

Css轮廓 轮廓是绘制于元素周围的一条线&#xff0c;位于边缘的外围&#xff0c;可起到突出元素的作用。Css outline属性规定元素轮廓的样式&#xff0c;颜色和宽度 outline p{ outline:#00FF00 dotted thick; }

Python 小白从零开始 PyQt5 项目实战(8)汇总篇(完整例程)

本系列面向 Python 小白&#xff0c;从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战。不跳过一个细节&#xff0c;不漏掉一行代码&#xff0c;不省略一个例图。 本系列从软件安装、环境配置开始&#xff0c;介绍了基本应用&#xff1a;菜单和工具栏、基本控件&#xf…

【youcans 的图像处理学习课】1. 安装与环境配置

专栏地址&#xff1a;『youcans 的图像处理学习课』 文章目录&#xff1a;『youcans 的图像处理学习课 - 总目录』 【youcans 的图像处理学习课】1. 安装与环境配置 1. OpenCV 计算机视觉库 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个跨平台的…