background如何简写？如何在背景图像不变的情况下，依旧实现页面文字滚动，为之奈何？别担心，快用background-attachment: fixed;/*固定定位*/常用的background样式如下，1.background-color2.background-image3.background-repeat4.background-attachment5.background-position，废话不多扯，直接代码页面展示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <title>11种常用css样式之背景样式学习</title>

     <style type="text/css">

     *{

         margin: 0;

         padding: 0;

         font: 14px/1.5em "Microsoft YaHei";

         color: #fff;

     }

     body{

         background-image:url(images/xs.png);/*背景图像*/

         background-repeat: no-repeat;/*不重复*/

         background-color: #ccc;

         background-position:left center;

         /* background-position: 50% 50%; */

         /*background-position: 10px 10px;*/

         /* 以窗口左上角为坐标系（0,0）定xy轴,朝right正,朝bottom为正 */

         /* background简写 */

         background: #f33 url(images/xs.png) no-repeat right center;

         background-attachment: fixed;/*固定定位*/

     }

     div.box{

         background-color:#f90;/*背景颜色*/

     }

     </style>

 </head>

 <body>

     <div class="box">

         你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;

     </div>

     <!-- <p>你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌&nbsp;&nbsp;Your stress comes from: unable to discipline yourself, but pretending to work hard;</p>*50 回车50 -->

 </body>

 </html>

11种常用css样式之background学习的更多相关文章

  1. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  2. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  3. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  4. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  5. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  6. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  7. Day 31：CSS选择器、常用CSS样式、盒子模型

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

  8. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  9. 几种常用CSS3样式

    在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...

随机推荐

  1. 《爬虫学习》（四）（使用lxml,bs4库以及正则表达式解析数据）

    1.XPath: XPath(XML Path Language)是一门在XML和HTML文档中查找信息的语言,可用来在XML和HTML文档中对元素和属性进行遍历. 工具:扩展商店里搜索:XPath ...

  2. 团队项目-Beta冲刺3（七个小矮人）

    团队项目-Beta冲刺3(七个小矮人) 一.格式描述 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScien ...

  3. GP工作室-团队项目Beta冲刺

    GP工作室-团队项目Beta冲刺 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求 ...

  4. Educational Codeforces Round 81 (Rated for Div. 2) B. Infinite Prefixes

    题目链接:http://codeforces.com/contest/1295/problem/B 题目:给定由0,1组成的字符串s,长度为n,定义t = sssssss.....一个无限长的字符串. ...

  5. Linux 常用工具sysstat之sar

    sysstat包 iostat.sar.sa1和sa2命令都是sysstat包的一部分.它是Linux包含的性能监视工具集合: sar:收集.报告或存储信息(CPU.内存.磁盘.中断.网卡.TTY.内 ...

  6. JDK源码之Double类&Float类分析

    一 概述 Double 类是基本类型double的包装类,fainl修饰,在对象中包装了一个基本类型double的值.Double继承了Number抽象类,具有了转化为基本double类型的功能. 此 ...

  7. netty EventLoop线程与当前线程的问题

    模拟客户端向服务端发送消息: 客户端部分代码如下,当连接激活触发消息发送,采用线程池的形式,分多个线程向服务端发送同一消息 @Override public void channelActive(Ch ...

  8. CSDN

    链接:https://blog.csdn.net/shaoyedeboke

  9. webpack入门系列2

    前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶. 1.使用 webpack 构建本地服务器: 想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webp ...

  10. 第一篇：CDH配置本地http服务

    在我们安装cdh的时候,避免不了要安装一大堆软件,包括cm的服务器,hadoop的各种组件.这些组件的文件都比较大,所以我们会在本地配置一个http服务,以便于在安装cdh服务的时候能快速的安装完.本 ...