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. 团队项目-Beta冲刺1（七个小矮人）

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

  2. Golang - 指针与引用

    ​ Golang有指针 , 那么一切数据都是值传递吗 ? 都需要用户进行指针传递吗, 其实不然, 对于Go语言, 虽然有指针, 但是其也有引用传递. 是不是很绕, 因为引用传递就是指针传递哇 . 我们 ...

  3. 机器学习-浅谈神经网络和Keras的应用

    概述 神经网络是深度学习的基础,它在人工智能中有着非常广泛的应用,它既可以应用于咱们前面的章节所说的Linear Regression, classification等问题,它还广泛的应用于image ...

  4. ShiroINI配置及加密(三)

    Shiro InI 配置 ini语法: 1.对象名 = 全限定类名 相对于调用 public 无参构造器创建对象 2.对象名. 属性名 = 值 相当于调用 setter 方法设置常量值 3.对象名. ...

  5. java容器(一) Collection类框架图解

  6. Leetcode 题目整理 Sqrt && Search Insert Position

    Sqrt(x) Implement int sqrt(int x). Compute and return the square root of x. 注:这里的输入输出都是整数说明不会出现 sqrt ...

  7. js 字符串方法 和 数组方法总览

    字符串方法        search()             方法搜索特定值的字符串,并返回匹配的位置.         相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...

  8. .Net Core初识以及启动配置

    .net程序员为什么要学习.net core .Net Core 是.Net的未来,微软在19年 5月已经明确说明,未来只有.Net 5(=.NET Core vNext),.Net 5是.net c ...

  9. koa中间执行机制

    start 基于 koa 2.11 按以下流程分析: const Koa = require('koa'); const app = new Koa(); const one = (ctx, next ...

  10. java（list，set，map）链接

    http://blog.csdn.net/smileiam/article/details/49836865 http://blog.csdn.net/u013344815/article/detai ...