在CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来，设置背景样式不再使用传统HTML属性来定义，转而使用无限制、更灵活的CSS来定义。

目标

设置背景颜色
设置背景图片
操作背景图片样式

背景颜色-background-color

在CSS中，使用background-color属性来定义元素的背景颜色。

语法：background-color:颜色值;

说明：颜色值是一个关键字或一个16进制的RGB值。

HTML标签

背景颜色设置

效果

背景图像--background-image

在CSS中，使用background-image属性来定义元素的背景图片。

语法：background-image:url("图像地址");

说明：图像地址可以是相对地址，也可以是绝对地址。

注意：给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。如果设置的元素的宽高过小，背景图片就无法完整地显示出来了。

设置背景图片

效果

背景重复样式--background-repeat

在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。

语法：background-repeat:取值;

取值

当值是repeat，全屏覆盖

全屏覆盖

当值是repeat-x，x轴方向覆盖

x轴方向覆盖

当值是repeat-y，y轴方向覆盖

y轴方向覆盖

当值是no-repeat，不复制

不复制

背景图片位置--background-position

在CSS中，使用background-position设置背景图像的位置

语法：background-positon:像素值/关键字;

说明：语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。

1. 像素值

要设置水平方向数值(x轴)和垂直方向数值(y轴)，参数如下

取值

假设设置一个距离左上角水平方向100px，垂直方向100px

背景图片位置设置

效果如下

效果

2. 关键字

当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。

取值

假设我们要设置一个水平方向、垂直方向都居中的位置，就可以这样设置

背景图片位置设置

这样他就永远都处于屏幕的正中间

效果

背景固定样式--background-attachment

在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动

语法：background-attachment:scroll/fixed;

说明：background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。

背景固定设置

效果

总结

css 背景效果_css基础篇06--背景样式相关推荐

下边框_css基础篇07--边框样式
在网页中,边框随处可见,任何块元素和行内元素都可以设置边框属性.例如,div元素可以设置边框,img元素也可以设置边框,table元素也可以设置边框,span元素同样也可以设置边框等等. 目标设置边 ...
前端学习笔记（CSS、JS基础篇）
CSS篇注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距.盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用 ...
CSS如何设置高度为屏幕高度_CSS基础篇笔记
css简介 css全称"层叠样式表",是由李爵士的挪威同事赖先生(hakon wium lie)首先提出的: css版本 css1 1996年 css2 1998年 css2.1 ...
css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度 ...
➷HTML+CSS前端笔记(基础篇-第一部分)
★ 学习目标: 根据.psd文件/图片,用html+css布局出静态网页: !DAY❶ 认识Web及常用标签基础概念铺垫网页构造原理网页元素:文字,图片,链接,音视频等: 网页构造原理:网页元素 ...
css设置图片、边框、背景样式
设置图片边框样式 border-style none无边框,默认值 dotted点线 dashed虚线 solid实线 double双线 groove凹型线 ridge凸型线 inset嵌入式 out ...
MySQL基础篇(06)：事务管理，锁机制案例详解
本文源码:GitHub·点这里 || GitEE·点这里一.锁概念简介 1.基础描述锁机制核心功能是用来协调多个会话中多线程并发访问相同资源时,资源的占用问题.锁机制是一个非常大的模块,贯彻MyS ...
python面试笔试宝典pdf_Python面试宝典之基础篇-06
题目26:什么是鸭子类型(duck typing)? 鸭子类型是动态类型语言判断一个对象是不是某种类型时使用的方法,也叫做鸭子判定法.简单的说,鸭子类型是指判断一只鸟是不是鸭子,我们只关心它游泳像不像 ...
属性值动态调整_【第1603期】CSS 自定义属性：使用篇
前言好的文章值得多看两眼.今日早读文章由@kmokidd翻译分享. 正文从这开始-- 可读性更高的 CSS 代码在读过 [第1596期]CSS 自定义属性:基础篇后,我们可以开始着手优化代码了,通 ...

css 背景效果_css基础篇06--背景样式