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

背景属性既可以为单个的单元设置背景，也可以为整个页面设置背景，可以对上述二者的任意组合设置背景，段落、文字、不同状态的链接、图像、内容区域修改其背景样式。设置背景有很多属性可以利用。将在下文中详细解释这些属性的用法。

css属性定义背景效果

  • background    简写属性，将背景属性设置在一个声明中
  • background-color  背景颜色
  • background-image  背景图片
  • background-position  背景图像定位，设置背景图像的起始位置
  • background-repeat   背景图像是否重复及如何重复
  • background-attachment  背景图像是否随着页面滚动

css3背景属性

  • background-size    背景图像的尺寸
  • background-origin   背景图像的定位区域
  • background-cilp   背景图像的绘制区域

一、css背景属性

（一）修改文本颜色

 background-color：

可以为所有的元素设置背景颜色，从整体页面到单个元素都可行。

background-color属性取值为color（颜色值）或是transparent（透明）

transparent 默认值，如果一个元素没有设置背景颜色，那么他就是默认透明的，允许通过父元素的背景颜色，这样其祖先元素就是可见的。

color颜色名称，该属性接受任何合法的颜色值通常使用：

  • 颜色名称（如：blue）；
  • 十六进制数（如：#ff00ff 或 #f0f）；
  • rgb（0,0,0）每个参数的取值范围是：0~255；
  • rgba（0,0,0,.5）最后一个参数代表的是透明度，取值范围为（0~1）,值0.5半透明，值1不透明。

代码：

效果：希望背景色从元素中的文本向外有延伸，只需增加一些内边距：如padding：10px

（二）使用背景图像作为背景

background-image:

默认情况下背景图像会进行平铺重复显示。（在不设置任何东西的情况下，这个页面中的背景图片多次重复出现）

页面示例:

background-image：属性的默认值为none，表示背景没有设置任何图片。只有在覆盖应用背景图像的元素的样式时才会使用这个声明。

如果想使用图片作为背景，就必须为这个属性加上url（）。如：输入一个url（image.jpg），这里的image.jpg是图像相对于样式表所在位置的路径和文件名。

注意：图片文件路径问题

代码：

效果：

（三）重复背景图像

  background-repeat：

该属性设置是否重复以及如何重复该图像，在默认情况下背景图像会在水平方向和垂直方向上重复显示。

背景图像的位置是由background-position属性决定的，如果没有规定该属性，那么重复将由页面的左上角开始。

输入background-repeat:direction，这里面direction可以取四个值：repeat、repeat-x、repeat-y、no-repeat。

  • repeat  同时横向和纵向重复图像
  • no-repeat  图像不重复，只显示一次
  • repeat-x  背景图像水平方向重复
  • repeat-y  背景图像垂直方向重复

代码一

效果一

代码二

效果二

代码三

效果三

（四）设置背景图像位置

background-position：

background-position_x_y属性取值可以分为三类，x 和 y 可以表示为距离左上角的绝对定位或是百分数，x 标识水平方向上的定位方式，y 表示垂直方向上的定位方式。

  • 关键字：如果仅规定了一个关键字，那么第二个值将会设置为“center”。注意：要把  background-attachment  取值属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

用left(左对齐)、right(右对齐)、center(居中)表示x；

用top(顶端对齐)、center(居中)、bottom(底端对其)表示y轴。

  • 百分数：可以将x和y设置为百分数（x%和y%），第一个值水平位置，第二个值垂直位置。左上角(0% 0%),右下角(100% 100%),同时水平垂直居中(50% 50%)，如果两个值只规定了一个那么另一个默认是50%。（两个值任意组合）
  • 长度值：x值水平位置，y值垂直位置，左上角0 0（为0的时候不用加单位），单位是像素（0px 0px）或者其他任何单位，单位也可以为负值。多种类型的取值可以混合使用，如（center 30%）background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。

代码

效果   注意：如果希望background-position属性使用关键字有效首先要设置background-attachment：fixed，如果不提前设置就会出现图二效果；

                            

（五）控制背景图像是否固定或是随页面滚动

background-attachment：

属性取值有两个：

  • fixed 背景图像会附着在浏览器窗口上，即使访问者滚动页面，图像仍然会继续显示。
  • scroll 滚动，访问者滚动页面的时候，图像会随着页面的滚动一起滚动。（默认值）

（六）简写属性 在一条声明中设置所有的背景属性

background：

1、接受所有的背景属性值，并且对这些值的排列并没有先后顺序要求。几乎可以对所有的HTML元素添加背景。

2、通常的时候尽量使用简写属性因为这样更加简便，不必指定所有的属性（例如：background：#ffff00 url(image.jpg)）。在简写法中没有任何指定的属性都将设置为默认值，有可能会覆盖先前定义的样式。

3、默认情况下，元素的背景会填充内容区和内边距部分，并直到抵到边框的边缘。可以通过 background-clip属性具体设置。

代码

表现效果

（七）默认值

background-color的默认值是transparent（透明）；background-image的默认值是none（无）；background-repeat的默认值是repeat（重复）；background-attachment的默认值是scroll（滚动）；background-position的默认值是0 0（等价于top left，即左上角），只有需要覆盖其他样式的规则时才去特意指定这些默认值。

二、css3定义背景属性

（一）规定背景图像的尺寸大小

background-size

background-size_a_b 可以通过以下属性值控制背景图像的显示大小

  • 长度值：第一个值设置宽度，第二个值设置高度。如果只设置了一个值，那么第二个值都会默认是“auto”。
  • 百分比：以父元素的百分比来设置背景图像的宽度和高度。第一个值宽度，第二个值是高度，只设置一个值，第二个值为“auto”
  • auto：默认值，即保持图片原有样式的大小不做改变。
  • cover：在填充元素整个背景区域的情况下，让图像尽可能的小，使用该值，图像的一部分可能会超出背景定位区域，因而变得不可见。
  • contain：在显示图像完整高度和宽度的情况下，尽可能的扩大图像的尺寸，使用该值，图像背景可能不会填充整个背景区域。

代码

表现效果：并没有占满整个body区域

（二）背景所在的区域

background-cilp：

制定背景绘制的区域，取值有四个：

  • border-box  默认值，背景放置在边框方框内（剪切成边框方框）
  • padding-box背景绘制在内边距方框内（剪切成衬距方框）
  • center-box 背景放在在内容方框内（剪切成内容方框）
  • text  背景放在文字区域内（剪切成文字形状）

使用background-cilp:text实现文字底纹效果，具体实现方法可以点击链接查看~

https://www.cnblogs.com/nyw1983/p/11363562.html

（三）背景开始的位置

background-origin

属性规定background-position属性相对于什么位置来定位，如果background-position的取值为fixed（固定），则该属性没有效果

  • border-box  背景图像相对于边框盒来定位
  • padding-box  背景图像相对于内边距框来定位
  • center-box   背景图像相对于内容区来定位

代码

效果

 实例：

1、background-origin: border-box;  背景图像相对于边框盒来定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像定位</title>

    <style>

    div{

        border:20px solid rgba(233,0,0,0.4);

        padding: 40px;

        background-image: url("1.jpg");

        background-repeat: no-repeat;

        background-size:contain;

        background-position:left;

    }

    .box1{

        background-origin:border-box;

        width:200px;

        height:300px;

    }

    </style>

</head>

<body>

    <div class="box1">

        background-origin: border-box;背景图像相对于边框盒来定位。

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    </div>

</body>

表现效果：

 2、background-origin: content-box;  背景图像相对于内容框来定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像定位</title>

    <style>

    div{

        border:20px solid rgba(233,0,0,0.4);

        padding: 40px;

        background-image: url("1.jpg");

        background-repeat: no-repeat;

        background-size:contain;

        background-position:left;

    }

    .box2{

        background-origin:content-box;

        width: 200px;

        height: 300px;

    }

    </style>

</head>

<body>

    <div class="box2">

        background-origin: content-box;背景图像相对于内容框来定位。

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    </div>

</body>

表现效果：

3、background-origin: padding-box;    背景图像相对于内边距框来定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像定位</title>

    <style>

    div{

        border:20px solid rgba(233,0,0,0.4);

        padding: 40px;

        background-image: url("1.jpg");

        background-repeat: no-repeat;

        background-size:contain;

        background-position:left;

    }

    .box3{

        background-origin:padding-box;

        width:200px;

        height:300px;

    }

    </style>

</head>

<body>

    <div class="box3">

        background-origin: padding-box;背景图像相对于内边距框来定位。

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

    </div>

</body>

表现效果：

CSS背景和CSS3背景background属性的更多相关文章

  1. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  2. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  3. 重新学习CSS，认识CSS3中的属性

    之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心 ...

  4. CSS+DIV之强化background属性

    1.背景颜色属性(background-color),设定背景颜色＝html中bgcolor属性.我来写一个红色背景的body,(也可以定义某个特定区域) 示例写法:body {} 2.背景图片属性( ...

  5. css颜色介绍和背景设置

    现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色和背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然. 颜色表达形式 1.RGB:rgb( red, ...

  6. CSS（九）：background（背景属性）

    通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

  7. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  8. 关于html与css的标签及属性（text文本属性、背景background属性、表格标签table、列表、）

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  9. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

随机推荐

  1. Text Elements(文本元素)对象

    1.T-Code:SE32 操作路径:主菜单——转到——内文元素——选择内文 2. 清单标题(List heading) 用于定义Report标题名称及描述,如图: 2. 選擇內文 (Selectio ...

  2. MAVEN打包时跳过Junit测试

    我们知道,通常情况下使用maven package命令打包时,会自动执行test包下的各个单元测试. 这是因为spring-boot-maven-plugin插件已经集成了maven-surefire ...

  3. Java课堂疑问解答与思考3

    一. 两对整数明明完全一样,为何一个输出true,一个输出false? 答: 整数在小于127时都可以用常量池,因此第一次比较的的地址是取自同一个地址的数字,而第二次比较的数是创建了两个不同地址的对象 ...

  4. Deepin15.10 python3安装、更新pip

    Deepin自带的Python3没有pip 需要安装一下: sudo apt install python3-pip更新pip sudo pip3 install --upgrade pip 然后运行 ...

  5. easy-mock的运用

    一.概念 Easy Mock 是杭州大搜车无线团队出品的一个极其简单.高效.​可视化.并且能快速生成模拟数据的 在线 mock 服务 .以项目管理的方式组织 Mock List,能帮助我们更好的管理 ...

  6. tarjan算法应用 割点 桥 双连通分量

    tarjan算法的应用. 还需多练习--.遇上题目还是容易傻住 对于tarjan算法中使用到的Dfn和Low数组. low[u]:=min(low[u],dfn[v])--(u,v)为后向边,v不是u ...

  7. Y7000 安装ubuntu16.04.6 的tips :禁用nouveau 、Wifi 问题 、nvidia 驱动安装

    由于最近要跑DeepLearning 所以在自己的Y7000上装一个Ubuntu ,自己碰了好多壁 写下来以防止自己忘掉以便后续再用! 配置:i7-8750H +GeForce GTX 1050Ti ...

  8. Django文档——Model中的ForeignKey,ManyToManyField与OneToOneField 关联关系字段 (Relationship fields)

    ForeignKey,ManyToManyField与OneToOneField分别在Model中定义多对一,多对多,一对一关系. 例如,一本书由一家出版社出版,一家出版社可以出版很多书.一本书由多个 ...

  9. C++ 中头文件<bits/stdc++.h>的优缺点

    在编程竞赛中,我们常见一个头文件: #include <bits/stdc++.h> 发现它是部分C++中支持的一个几乎万能的头文件,包含所有的可用到的C++库函数,如<istrea ...

  10. 03-Django-models

    # Models 模型 - ORM - ObjectRelationMap : 把面向对象思想转换成关系数据库思想.操作上把类等价于表格 - 类对应表格 - 类中的属性对应表中的字段 - 在应用中的m ...