CSS:背景颜色/背景图像

使用CSS可以为html标签指定背景图像或背景颜色,并且可以设置图像的位置。

代码整理自w3school:http://www.w3school.com.cn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<!--
(1)设置背景颜色:background-color
(2)设置背景图像:background-image
(3)设置背景图像的重复:background-repeat
(4)背景定位:background-position
(5)背景关联:background-attachment
-->
<head>
  <style>
    h1 {background-color:#afa}
    h2 {background-color:rgb(255,187,187)}
    div#bgImage
      {
      background-image:url(images/bg_image.jpg);
      padding:10px;
      }

    div#bgImageKeywords
      {
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:30px;
      background-repeat:no-repeat;
      background-position:left bottom;
      }

      div#bgImagePercent
      {
      width:400px;
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:40px;
      background-repeat:no-repeat;
      background-position:20% 80%;
      }

      div#bgImageOffset
      {
      width:400px;
      background-color:#ddd;
      background-image:url(images/d_sikao.png);
      padding:40px;
      background-repeat:no-repeat;
      background-position:200px 20px;
      }

      div#bgImageAttach
      {
      background-image:url(images/bg_image.jpg);
      padding:10px;
      background-attachment:fixed;
      }
  </style>
</head>

<title>CSS 背景</title>

<body>
  <h1>这是一个h1级别的标题:淡绿色</h1>
  <h2>这是一个h2级别的标题:淡红色</h2>
  <h3>这是一个h3级别的标题(没有设定样式)</h3>

  <div id="bgImage">
    <p>这个段落有背景图像,有内边距,允许重复(默认)<p>
  </div>

  <br/>
  <!--使用 关键字 描述背景图像的位置。位置关键字可以按任何顺序出现,只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。-->
  <div id="bgImageKeywords">
    <p>淡灰色背景色,同时有背景图像,不允许重复,背景图像居 左下方 显示<p>
  </div>

  <br/>
  <!--使用 百分比 描述背景图像的位置。百分比是图像相对于元素的位置(而不是整个浏览器窗口)。
      如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。-->
  <div id="bgImagePercent" >
    <p>背景图像相对元素居 水平20%,垂直80% 显示<p>
  </div>

  <br/>
  <!--使用 偏移量 描述背景图像的位置。即图像的左上角与 background-position 声明中的指定的点对齐。-->
  <div id="bgImageOffset">
    <p>背景图像相对元素左上角的偏移量为水平200px,垂直20px<p>
  </div>

  <br/>
  <!--背景关联。如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。-->
  <div id="bgImageAttach">
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
    <p>这个段落的背景图像不会随着文字滚动。<p>
  </div>

</body>

</html>

效果图:

时间: 2024-10-16 19:27:27

CSS:背景颜色/背景图像的相关文章

css 渐变颜色背景gradient 浏览器兼容

兼容当前五大浏览器的渐变颜色背景gradient的写法<style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: url(gradient.jpg); /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient

23.CSS边框与背景【下】

第十七章  CSS边框与背景[下] 一.设置背景 属性                   值               说明              CSS版本 background-color         颜色              背景的颜色            1 background-image         none或url         背景的图片           1/3 background-repeat        样式名称          背景图片的

CSS初识- 选择器 &amp;背景&amp; 浮动&amp; 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

eclipse中调整字体大小和改变背景颜色

调整字体大小: Window-Preferences-General-Appearence-Colors And Fonts 修改背景颜色: windows->Preferences->General->Editor->Text Editors右边选择Appearance color options 选Background color 选择背景颜色 背景颜色推荐:色调:85 饱和度:123 亮度:205

CSS构造颜色、背景与图像

设定颜色 背景使用 图像使用 1.设定颜色 红色的几种合法定义; ????#f00; ????#ff0000; ????Red; ????Rgb(255,0,0); ????Rgb(100%,0%,0%); ? 2.十六进制三元组 ? ????第一个字节:红色的值; ????第二个字节:绿色的值; ????第三个字节:蓝色的值; ????简化写法:#cccccc 可写成 #ccc, #ff6633可以写成 #f63 ? 3.使用17种具名颜色 ????黑色(black)???? 000000 ?

22 , CSS 构造颜色、背景与图像

1. 设定颜色 2. 背景使用 3. 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0%); 2.十六进制三元组 第一个字节:红色的值; 第二个字节:绿色的值; 第三个字节:蓝色的值; 简化写法:#cccccc 可写成 #ccc, #ff6633 可以写成 #f63 3.使用 17 种具名颜色 黑色(black) 000000 藏蓝色(navy) 000080 绿色(green) 008000 海蓝色(t

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

强大的CSS:颜色、背景和剪切

颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜色,它就像rgba(0,0,0,0)的缩写. currentColor currentColor代表原始的color属性的计算值.比如当前元素color为红色,背景色设置为currentColor,那么现在背景色也为红色. rgb.rgba 颜色还可以用rgb函数表示,如rgb(255, 255,