NAXS网

首页 > 网络 > CSS / 正文

CSS 背景

admin 2020-01-22 CSS 评论

css 背景属性用于定义html元素的背景。

CSS 属性定义背景效果:

  • baCKground-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

实例

body {background-color:#b0c4de;}


尝试一下 »

CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"

  • RGB - 如:"rgb(255,0,0)"

  • 颜色名称 - 如:"red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

实例

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}


尝试一下 »


背景图

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

实例

body {background-image:url('paper.gif');}


尝试一下 »

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

实例

body {background-image:url('bgdesert.jpg');}


尝试一下 »


背景图像 - 平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示: 

实例

body
{
background-image:url('gradient2.png');
}


尝试一下 »

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

实例

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}


尝试一下 »


背景图像- 设置定位与不平铺

Remark

让背景图像不影响文本的排版

如果你不想让图像平铺,你可以使用 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":

实例

body {background:#ffffff url('img_tree.png') no-repeat right top;}


尝试一下 »

当使用简写属性时,属性值的顺序为::

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

以上属性无需全部使用,你可以按照页面的实际需要使用.

这个实例使用了先前介绍的CSS,你可以查看相应实例:CSS 实例


Examples

更多实例

如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。


CSS 背景属性

Property描述
background简写属性,作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。

推荐您阅读更多有关于“CSS”的文章

  • 常用CSS代码大全 CSS

    常用CSS代码大全

    用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用。...

    21416 2020-01-26
  • CSS 实例 CSS

    CSS 实例

    CSS 实例CSS背景设置页面的背景颜色设置不同元素的背景颜色设置一个图像作为页面的背景错误的背景图片如何在水平方向重复背景图像如何定位背景图像一个固定的背景图片...

    136 2020-01-22
  • CSS 总结 CSS

    CSS 总结

    你已经学习了CSS,下一步学习什么呢?CSS 总结本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。...

    96 2020-01-22
  • CSS属性 CSS

    CSS属性

    CSS 属性 选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是class和id。注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器...

    60 2020-01-22
  • CSS 媒体类型 CSS

    CSS 媒体类型

    CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 媒体类型一些 CSS 属性只设计了某些媒体...

    78 2020-01-22
  • CSS 图像拼合技术 CSS

    CSS 图像拼合技术

    CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。...

    122 2020-01-22
热门浏览
热门标签
生肖 排行榜 游戏 十二生肖 淘宝 WORD 节日 攻略 Excel 小说 抖音 句子 原神 win10 手机 云顶之弈 梦幻西游 SEO ppt 故事 排行 英雄联盟 微信 经典 意思 WPS 赚钱 觅长生 大全 什么 和平精英 疫情地图 百度地图 王者荣耀 春节 推荐 光遇 诗句 Win7
最新评论