css背景background属性常用于定义HTML的背景，background简写属性作用是将背景属性设置在一个声明中，background背景属性常见为以下这些：.background-color代表背景颜色   .background-image代表背景图像   .background-repeat 代表背景图像水平或者垂直平铺  .background-attachment代表背景图像是否固定或者随着页面的其余部分滚动   .background-position代表设置背景图像的起始位置 在这些背景效果中background-color属性定义了元素的背景颜色,颜色值通常以以下方式定义:十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"颜色名称 - 如："red" 具体用下面的代码展示说明下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS背景background</title>

    <style type="text/css">

    /*background-color:定义元素背景色*/

    div{

        /*颜色值通常以以下方式定义:十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"颜色名称 - 如："red"*/

        color: #f90;

        color: rgb(red, green, blue);

        color: royalblue;

        color: rgb(255,255,255);

        background-color: blueviolet;

    }

    /*background-image:定义元素背景图像*/

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

    }

    /*background-repeat:代表背景图像水平或者垂直平铺*/

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-repeat: repeat-x;/*图像水平平铺*/

        background-repeat: repeat-Y;/*图像垂直平铺*/

        background-repeat: no-repeat;/*图像拒绝平铺*/

    }

    /*background-position代表设置背景图像的起始位置*/

    /* 提示：为 background-position 属性提供值有很多方法。首先，

可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 */

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-position:left top;

    }

    /* background-attachment代表背景图像是否固定或者随着页面的其余部分滚动 */

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-repeat: no-repeat;

        background-position:800px 1000px;/*图像将在元素内边距向右移动800px，向下移动1000px*/

        background-attachment: fixed;

    }

    /* background背景简写 */

    /* div{

        background: color image repeat attachment position;

    } */

    </style>

</head>

<body>

    <div>如何在页面滚动齿轮的时候实现背景图不动，选择 background-attachmn:fixed</div>

    <!-- 100个换行符 br*100敲下enter键 -->

</body>

</html>

css常用样式背景background如何使用的更多相关文章

  1. CSS 常用样式 – 背景属性

    一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 & ...

  2. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  3. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  4. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  5. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  6. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  7. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  8. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  9. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

随机推荐

  1. 实现一个简易的RPC

    之前写了一些关于RPC原理的文章,但是觉得还得要实现一个.之前看到一句话觉得非常有道理,与大家共勉.不是“不要重复造轮子”,而是“不要发明轮子”,所以能造轮子还是需要造的. 如果大家还有不了解原理的, ...

  2. 一分钟简单了解 JSON Web Token

    JSON Web Token(JWT)是一个开放的标准(RFC 7519),它定义了一个紧凑且自包含的方式,用于在各方之间作为 JSON 对象安全地传输信息.由于此信息是经过数字签名的,因此可以被验证 ...

  3. ARTS Week 3

    Nov 11,2019 ~ Nov 17,2019 Algorithm 本周来介绍快速求一个数字n次方的余数. 理论基础 我们先定义运算$ x \bmod p = r \(与\) x \equiv r ...

  4. BZOJ 4034 [HAOI2015]树上操作(欧拉序+线段树)

    题意: 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增 ...

  5. POJ 1789 Truck History (Kruskal最小生成树) 模板题

    Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for v ...

  6. SSL：GoDaddy SSL证书制作和安装

    简介 SSL证书是数字证书的一种类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书.SSL 证书就是遵守SSL协议,由受信任的数字证书颁发机构CA,在验证服务器身份后颁 ...

  7. 数据算法 --hadoop/spark数据处理技巧 --（9.基于内容的电影推荐 10. 使用马尔科夫模型的智能邮件营销）

    九.基于内容的电影推荐 在基于内容的推荐系统中,我们得到的关于内容的信息越多,算法就会越复杂(设计的变量更多),不过推荐也会更准确,更合理. 本次基于评分,提供一个3阶段的MR解决方案来实现电影推荐. ...

  8. k8s系列---资源指标API及自定义指标API

    不得不说千万不要随意更改版本,我用的1.13的版本,然后学到这一步时,还因yaml文件不同,卡住了很久,然后各种google才找到解决办法  https://www.linuxea.com/2112. ...

  9. matplotlib如何显示中文

    问题:matplotlib不能渲染中文 想设定为中文字体,网上搜索的方法几乎都是下面这样,已经把字体拷贝到了程序目录下了,然而并没有生效 plt.rcParams [ font.sans-serif' ...

  10. python制作ico图标

    import PythonMagick img = PythonMagick.Image('image.png') img.sample('64x64') img.write('image_64x64 ...