`
desert3
  • 浏览: 2160560 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

css属性 background

    博客分类:
  • Html
 
阅读更多
参考:http://www.w3school.com.cn/css/pr_background.asp

Background属性:设置控件的背景属性。
background 简写属性在一个声明中设置所有的背景属性。
可以按顺序设置如下属性:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

可能值:
  • background-color 规定要使用的背景颜色。参阅:background-color 中可能的值。
  • background-image 规定要使用的背景图像。参阅:background-image 中可能的值。
  • background-repeat 规定如何重复背景图像。参阅:background-repeat 中可能的值。
  • background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。参阅:background-attachment 中可能的值。
  • background-position 规定背景图像的位置。参阅:background-position 中可能的值。
  • inherit 规定应该从父元素继承 background 属性的设置。


background-color 属性设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
可能值:
  • transparent 默认。背景颜色为透明。
  • color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
  • hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
  • rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
  • inherit 规定应该从父元素继承 background-color 属性的设置。


background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复
根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。
初始背景图像(原图像)根据 background-position 属性的值放置。
可能值:
  • none 默认值。不显示背景图像。
  • url('URL') 指向图像的路径。
  • inherit 规定应该从父元素继承 background-image 属性的设置。


background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。
可能值:
  • repeat 默认。背景图像将在垂直方向和水平方向重复
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。


background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
可能值:
  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed 当页面的其余部分滚动时,背景图像不会移动。
  • inherit 规定应该从父元素继承 background-attachment 属性的设置。


background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
可能值:
  • top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right                    如果您仅规定了一个关键词,那么第二个值将是"center" 默认值:0% 0%。
  • x% y%  第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
  • xpos ypos  第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。


分享到:
评论

相关推荐

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    css属性详解说明,css属性详解说明

    ### CSS属性详解 #### 背景属性 (Background Properties) **1. background** - **简介:** `background` 是一个简写属性,用于在单个声明中设置一系列背景相关的属性。 - **用法示例:** ```css .example { ...

    js控制css属性对照表

    本文将详细介绍如何利用JavaScript控制CSS属性,并提供一份详尽的属性对照表,帮助读者更好地理解和掌握这一技能。 #### 二、基础知识 ##### 2.1 CSS属性 CSS属性定义了HTML元素的外观和布局。它们由属性名和值...

    css属性查询手册

    《CSS属性查询手册》是针对CSS 2.0版本的一份详尽参考资料,它为开发者提供了全面、深入的CSS属性理解和应用指南。CSS,即层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML...

    css 属性一览表

    ### CSS 属性一览表 #### 1. CSS 文字属性 CSS 文字属性用于控制文本在网页中的显示方式。以下是一些常用的 CSS 文字属性及其功能: - **color**: 设置文字的颜色。例如:`color: #999999;`。 - **font-family**:...

    Javascript获取background属性中url的值

    在JavaScript中,获取CSS属性,特别是像`background-image`这样的复合属性,可能需要一些技巧。在上述场景中,开发者遇到了一个问题,需要从CSS的`background-image`属性中提取出图片URL。`background-image`属性...

    background-blend-mode:CSS 属性 background-blend-mode 的示例

    【背景混合模式:CSS属性`background-blend-mode`详解】 在网页设计中,CSS(层叠样式表)为我们提供了丰富的工具来控制元素的外观和布局。`background-blend-mode`是一个高级CSS属性,允许我们定义元素背景图像...

    批量输出 CSS background-position 属性的定位像素值

    在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...

    别具光芒——CSS属性、浏览器兼容与网页布局

    "别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念:CSS属性、浏览器兼容性和网页布局。 首先,我们来详细探讨CSS属性。CSS提供了无数的属性,如颜色、字体、大小、位置等,这些属性共同决定...

    07_常见的CSS属性-background-color.html

    07_常见的CSS属性-background-color

    CSS属性查询以及用法

    CSS 属性查询以及用法 CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-...

    layui弹出层样式修改,使用css的background属性设置多个背景图附件

    本话题将详细探讨如何在layui中修改弹出层的样式,特别是如何使用CSS的`background`属性来设置多个背景图片。 首先,我们需要理解layui弹出层的工作原理。layui的弹出层是通过JavaScript动态生成HTML元素实现的,...

    Javascript和Css属性对照

    通过 `javascipt和css属性对照.doc` 文件,你可以系统地学习并对比这两种语言的属性,进一步提升你的前端技能。 记住,学习 JavaScript 和 CSS 的属性对照不仅仅是了解它们的用法,还要深入理解其工作原理,这样...

    css属性的各种定义

    ### CSS属性详解:掌握网页设计的关键 在网页设计与开发领域,CSS(层叠样式表)扮演着至关重要的角色,它不仅能够美化网页界面,还能有效地控制页面布局,实现复杂多样的视觉效果。本文将深入解析CSS中的各种属性...

    常用的CSS属性大全

    以下是一些常见的CSS属性及其详细解释,帮助你全面理解并掌握它们的用法。 一、HTML基本样式 在HTML中,一些基础样式可以通过标签来实现,如`<pre>`用于预格式化的文本,`<div>`作为内容的容器,`<font>`用于控制...

    CSS3的background-size属性,实现响应式式图片等比例缩放。

    CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一,它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小,而不仅仅是局限于图片...

    css属性大全(css的所有属性)

    本文将深入探讨CSS中的几个关键属性,包括背景、字体、区块和边框属性。 一、背景属性 背景属性允许我们对元素的背景进行定制,包括颜色、图像、重复方式、附加行为以及位置。例如,`background-color`用于设置元素...

    打造节日氛围:使用CSS `background` 属性为圣诞树添加背景图案

    通过使用CSS的background属性,我们可以为圣诞树添加吸引人的背景图案,从而创造出梦幻般的节日氛围。这种技术不仅可以应用于圣诞树的背景,还可以用于网站设计中的许多其他元素,以增强视觉吸引力和用户体验。随着...

    css背景属性案例

    ### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中,CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性,可以极大地增强页面的视觉效果和用户体验。本文将...

    css属性大全 样式表的创建 样式表的属性

    ### CSS属性大全:样式表的创建与样式表的属性 #### 概述 CSS(Cascading Style Sheets),即层叠样式表,是一种用于描述HTML文档外观和布局的语言。通过CSS,网页设计师能够精确控制页面元素的样式,包括字体、...

Global site tag (gtag.js) - Google Analytics