CSS 背景

CSS 属性定义背景效果:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
     1、颜色值通常以以下方式定义:

十六进制 - 如:"#ff0000"

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

颜色名称 - 如:"red"

     2、background-image:url('xxxxxx.jpg')
 
     3、 repeat:背景图像将向垂直和水平方向重复。这是默认
           repeat-x:只有水平位置会重复背景图像
           repeat-y:只有垂直位置会重复背景图像
           no-repeat:background-image不会重复
           inherit:指定background-repea属性设置应该从父元素继承
 
      4、scroll:背景图片随页面的其余部分滚动。这是默认
           fixed:背景图像是固定的
           inherit:指定background-attachment属性设置应该从父元素继承
           背景图像是否固定或者随着页面的其余部分滚动
 
      5、
关键字

图像放置关键字最容易理解的作用就像其名字的意义。例如,top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向,那么你可以设置位置关键字以任何顺序出现。

如果只有一个关键字,则会默认另一个关键字为 center。background-position:right top;

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,你可以按照下面的代码进行设置:

background-position:50% 50%;

长度值

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

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

background-position:50px 100px;

(偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。)

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

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

CSS速查列表-1-(background)背景的更多相关文章

  1. CSS速查列表-3-(font)字体

    CSS Fonts(字体) CSS字体属性定义 1.字体:font-family 属性设置文本的字体系列.p{font-family:"Times New Roman", Time ...

  2. CSS速查列表-2-(text)文本

    CSS的Text属性可以改变页面中 1.文本的颜色(color). 2.字符间距(word-spacing ) 属性可以改变字(单词)之间的标准间隔.其默认值 normal 与设置值为 0 是一样的 ...

  3. HTML速查列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. 框架、颜色、颜色名、脚本、字符实体、URL、速查列表

    一. 1.<iframe></iframe>标签设置内联框架(一个内联框架用来当前HTML文档嵌入另一个文档).[语法:<iframe src="URL&quo ...

  5. HTML 速查列表

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  6. 吴裕雄--天生自然HTML学习笔记:HTML 速查列表

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  7. 速查列表:Apache SkyWalking OAL 的 域(Scopes)

    OAL简介 在流模式(Streaming mode)下,SkyWalking 提供了 观测分析语言(Observability Analysis Language,OAL) 来分析流入的数据. OAL ...

  8. html 速查表

    HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用. HTML 基本文档 <!DOCTYPE html> <html> <head> <ti ...

  9. Web设计的速查卡(转)

    一.排版 1.VisiBone Font Card Download: GIF 2.常用字体表 (HTML) 3.混合字体 (PDF) 二.单元/尺寸 1.Points 和Pixels近似转换表 (H ...

随机推荐

  1. Caused by: java.lang.ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWo

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  2. 异常-----freemarker.core.NonStringException

    一,案例一 1.1.错误描述 <html> <head> <meta http-equiv="content-type" content=" ...

  3. 【原】Spring Boot 配置swagger2没有文档解决方案

    @Bean public Docket customImplementation(){ return new Docket(DocumentationType.SWAGGER_2) .select() ...

  4. 吐血整理:人工智能PDF中文教材资源包2.73G基本包含全部学习资料-人工智能学习书单

    吐血整理:人工智能PDF中文教材资源包2.73G基本包含全部学习资料 人工智能学习书单(关注微信公众号:aibbtcom获取更多资源) 文末附百度网盘下载地址 人工神经网络与盲信号处理 人工神经网络与 ...

  5. js+jq实现图片预览,支持到ie9+ff+chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 在C#的控制台应用中使用Dapper链接MySQL并执行一些增删改查

    一.首先先创建一个C#的控制台应用 二.然后添加上必要的命名空间 using System;using System.Collections.Generic;using MySql.Data.MySq ...

  7. 【BZOJ1901】【Luogu2617】Dynamic Ranking(主席树,树状数组)

    [BZOJ1901][Luogu2617]Dynamic Ranking(主席树,树状数组) 题面 神TM BZOJ权限题 Luogu真良心 题解 如果不考虑修改 很容易的主席树区间第K大 考虑修改 ...

  8. 【NOIP2004】【CJOJ1703】【洛谷1092】虫食算

    题面 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045 +8468#6633 44445509678 ...

  9. 魔改版ss-panel v3前端配置文件

    配置文件所在目录:网站根目录/config/.config.php <?php // ss-panel v3 配置 // // !!! 修改此key为随机字符串确保网站安全 !!! $Syste ...

  10. sql注入之一次艰难的绕过-三层防护(oracle)

    打开:www.xxxx.com/news/detail.jsp?id=2862 我们经过测试知道此处含有sql注入.我们尝试下: http://www.xxxxxx.com/news/detail.j ...