用CSS定义Backgrounds(背景)样式
背景属性用于定义HTML元素的背景,包括背景图片,背景色,图片填充方式等。
属性定义背景效果,属性名如下:
background-color
background-image
background-repeat
background-attachment
background-position
下面我们详细介绍每个属性的含义和取值。
背景颜色
background-color 属性定义了网页元素的背景颜色。
页面的背景颜色使用在div的选择器中:
div {background-color:#b0c400;}
CSS中,颜色值一般以下述三种方式定义:
十六进制 - 如:"#ff0000"
RGB - 如:"rgb(255,0,0)"
颜色名称 - 如:"red"
以下实例中, h1, p, 和 div 元素拥有不一样的背景颜色:
h1 {background-color:#FFF;} p {background-color:#e0ff33;} div {background-color:#b0c4de;}
提示:你可以为所有元素设置背景色,包括 body 一直到 em 和 a 等行内元素。
提示:background-color 不能继承,其默认值是 transparent。如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才可见。
背景图像
有一些网页有精美的背景图片,这时候就要用到背景图像属性了(background-image ).
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
网页背景图片设置实例:
body {background-image:url('bg.gif');}
背景图像填充方式 - 水平或垂直平铺
如果需要在HTML页面上对背景图像进行平铺,可以使用 background-repeat 属性。
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示:
body { background-image:url('gradient2.png'); }
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
背景图像- 设置定位与不平铺
让背景图像不影响文本的排版
如果你不想让图像平铺,你可以使用 background-repeat 属性:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
提示:为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或 5cm;最后也可以使用百分数值。不一样类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解的作用就像其名字的意义。例如,top left 使图像放置在元素内边距区的左上角。
只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向,那么你可以设置位置关键字以任何顺序出现。
如果只有一个关键字,则会默认另一个关键字为 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top; }
下面是等价的位置关键字:
单一关键字 | 等价的关键字 |
---|---|
center | center center |
top | top center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
定位按百分数值
百分数值来定义位置,你需要非常清楚自己想要达到的效果,然后设置对应的百分比,好处就是:当网页变换大小时,或者div等元素变换大小时,也能保证图片的正确位置及显示大小。
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:50% 50%; }
这会导致图像适当放置,其中心与其元素的中心对齐。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:66% 33%; }
长度值
长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:50px 100px; }
注意,这一点与百分数值不一样,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时,属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.
这个实例使用了先前介绍的CSS,你可以查看相应实例: CSS 实例
CSS 背景属性
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
原文链接: https://www.yukx.com/moran/article/details/416.html 优科学习网用CSS定义Backgrounds(背景)样式
-
在HTML中,如果你想让一个输入框(input元素)不可编辑,你可以通过设置其readonly属性来实现。示例如下:input type="text" value="此处内容不可编辑" readonly在上述代码中,readonly属性使得用户无法修改输入框中的内容。另外,如果你希望输入框完全不可交
-
ASP.NET教程ASP.NET又称为ASP+,基于.NETFramework的Web开发平台,是微软公司推出的新一代脚本语言。ASP.NET是一个使用HTML、CSS、JavaScript和服务器脚本创建网页和网站的开发框架。ASP.NET支持三种不一样的开发模式:WebPages(Web页面)、
-
C# 判断判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的)。下面是大多数编程语言中典型的判断结构的通常形式:判断语句C#提供了以下类型的判断语句。点击链接查看每个语句的细节。语句描述if语句一个 if语句 由一个布尔表达式后跟
-
C#循环有的时候,可能需要多次执行同一块代码。通常情况下,语句是顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。编程语言提供了允许更为复杂的执行路径的多种控制结构。循环语句允许我们多次执行一个语句或语句组,下面是大多数编程语言中循环语句的通常形式:循环类型C#提供了以下几种循环类型
-
C#数组(Array)数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合,一般认为数组是一个同一类型变量的集合。声明数组变量并不是声明number0、number1、...、number99一个个单独的变量,而是声明一个就像numbers这样的变量,然后使用numbers[0]
-
ASP.NET是一个由微软公司开发的用于构建Web应用程序的框架,它是.NETFramework的一部分。它提供了一种模型-视图-控制器(MVC)架构、Web表单以及最新的ASP.NETCore中的RazorPages等多种开发模式,可以用来创建动态网页和Web服务。以下是一些基础的ASP.NET编