web前端学习(十三)——CSS3背景属性(background)的相关设置

简介: web前端学习(十三)——CSS3背景属性(background)的相关设置

1.CSS背景


CSS背景属性用于定义HTML元素的背景。

CSS属性定义背景效果:

·       background-color:设置元素的背景颜色。

·       background-image:把图像设置为背景。

·       background-repeat:设置背景图像是否及如何重复。

·       background-attachment:背景图像是否固定或者随着页面的其余部分滚动。

·       background-position:设置背景图像的起始位置。

·       background:简写属性,作用是将背景属性设置在一个声明中。


1.1 background-color属性

描述

color

指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。

transparent

指定背景颜色应该是透明的。这是默认

inherit

指定背景颜色,应该从父元素继承

实例一:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body {background-color: #00FFFF;}
    </style>
  </head>
  <body>
    <h1>我的网页背景被渲染了!!!</h1>
    <p>Hello World!!!</p>
  </body>
</html>

实例二:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body {background-color: #00FFFF;}
      h1 {background-color: #FF1493;}
      p {background-color: #7FFF00;}
      div {background-color: #A52A2A;}
    </style>
  </head>
  <body>
    <h1>CSS background-color 实例:</h1>
    <div>
      这个段落插入在div元素中
      <p>我们为此段落设置了单独的背景颜色</p>
      我们在div元素区块中设置了另一种背景颜色
    </div>
  </body>
</html>

1.2 background-image属性

说明

url('URL')

图像的URL

none

无图像背景会显示。这是默认

linear-gradient()

创建一个线性渐变的 "图像"(从上到下)

radial-gradient()

用径向渐变创建 "图像" (center to edges)

repeating-linear-gradient()

创建重复的线性渐变 "图像"

repeating-radial-gradient()

创建重复的径向渐变 "图像"

inherit

指定背景图像应该从父元素继承

实例一:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body 
      {
        background-color: #DEB887;
        background-image: url(images/tx.jpg);
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!!!</h1>
    <p>可以看到我们为网页设置的背景颜色和背景图像</p>
  </body>
</html>

1.3 background-repeat属性

说明

repeat

背景图像将向垂直和水平方向重复。这是默认

repeat-x

只有水平位置会重复背景图像

repeat-y

只有垂直位置会重复背景图像

no-repeat

background-image不会重复

inherit

指定background-repea属性设置应该从父元素继承


1.4 background-position属性

描述

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

如果仅指定一个关键字,其他值将会是"center"

x% y%

第一个值是水平位置,第二个值是垂直。左上角是00%。右下角是100100%。如果仅指定了一个值,其他值将是50%。。默认值为:00

xpos ypos

第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions

inherit

指定background-position属性设置应该从父元素继承


实例一:

注释部分使用了背景中的简写属性。

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

·       background-color

·       background-image

·       background-repeat

·       background-attachment

·       background-position

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body 
      {
        background-color: #DEB887;
        background-image: url(images/tx.jpg);
        background-repeat: no-repeat;
        background-position: center;
        /*background: #DEB887 url(images/tx.jpg) no-repeat center;*/
      }
    </style>
  </head>
  <body>
    <h1>Hello World!!!</h1>
    <p>背景图片只显示一张,不再重复</p>
    <p>同时背景图片与文本内容分开,居中显示</p>
  </body>
</html>

1.5 background-attachment属性

描述

scroll

背景图片随着页面的滚动而滚动,这是默认的。

fixed

背景图片不会随着页面的滚动而滚动。

local

背景图片会随着元素内容的滚动而滚动。

initial

设置该属性的默认值。阅读关于 initial 内容

inherit

指定 background-attachment 的设置应该从父元素继承。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body 
      {
        background-color: #DEB887;
        background-image: url(images/tx.jpg);
        background-repeat: no-repeat;
        background-position: top;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!!!</h1>
    <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>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
    <p>背景图片是固定的。尝试向下滚动页面。</p>
  </body>
</html>

相关文章
|
1月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
37 2
|
1天前
|
JSON 中间件 数据处理
实践出真知:通过项目学习Python Web框架的路由与中间件设计
【7月更文挑战第19天】探索Python Web开发,掌握Flask或Django的关键在于理解路由和中间件。路由连接URL与功能,如Flask中@app.route()定义请求响应路径。中间件在请求处理前后执行,提供扩展功能,如日志、认证。通过实践项目,不仅学习理论,还能提升构建高效Web应用的能力。示例代码展示路由定义及模拟中间件行为,强调动手实践的重要性。
|
17天前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
25天前
|
移动开发 前端开发 JavaScript
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
|
1月前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
21 3
|
1月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
27 1
|
1月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
45 1
|
22天前
|
资源调度 前端开发 JavaScript
web实现酷炫的canvas粒子动画背景
web实现酷炫的canvas粒子动画背景
12 0
|
2月前
|
JSON Go 数据格式
golang学习7,glang的web的restful接口结构体传参
golang学习7,glang的web的restful接口结构体传参
|
2月前
|
JSON Go 数据格式
golang学习6,glang的web的restful接口传参
golang学习6,glang的web的restful接口传参