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. C语言进阶——全局变量

    全局变量 ·定义在函数外面的变量是全局变量 ·全局变量具有全局的生存期和作用域 ·它们与任何函数都无关 ·在任何函数内部都可以使用它们 全局变量初始化 ·没有做初始化的全局变量会得到0值 ·指针会得到 ...

  2. Quartz cron 表达式(linux 定时器，java 定时任务，spring task定时任务)

    原文地址:https://blog.csdn.net/feng27156/article/details/39293403 Quartz cron 表达式的格式十分类似于 UNIX cron 格式,但 ...

  3. Exchange Server 2016 本地部署安装流程

    思路:一台Server 2016用作AD+DNS,一台Server 2016用作Exchange Server 2016 Exchange Server 2016 CU14 安装路径:安装路径:htt ...

  4. kali-2019.4中文乱码问题的解决

    1.安装完kali-2019.4版出现乱码问题 2.更新源,用vi编辑器,在/etc/apt/resources.list中添加清华源 #清华大学 [更新源]deb https://mirrors.t ...

  5. SpringCloud与微服务Ⅱ --- 微服务概述

    一.什么是微服务 1) Martin Fowler论文对微服务的阐述(中文版) 2) 对单一应用进行拆分 3) 每一个独立的应用都有一个独立的进程 4) 拥有自己独立的数据库 5) 微服务化的核心就是 ...

  6. 使用自定义注解和springAOP捕获Service层异常,并处理自定义异常

    一 自定义异常 /** * 自定义参数为null异常 */ public class NoParamsException extends Exception { //用详细信息指定一个异常 publi ...

  7. 场景7:带有Linux网桥的提供商网络

    此场景描述了使用带有Linux网桥的ML2插件的OpenStack网络服务的供应商网络实现. 供应商网络通常以灵活性为代价提供简单性.性能和可靠性.与其他场景不同,只有管理员可以管理提供者网络,因为它 ...

  8. 4..部署场景2：带有遗留的Linux Bridge

    此场景描述了使用Linux bridge的ML2插件实现OpenStack网络服务的遗留(基本)实现. 遗留实现通过为常规(非特权)用户提供一种方法来管理一个项目中的虚拟网络,并包含以下组件:提供了自 ...

  9. 实验1: Cisco路由器基础配置

    实验 1:  Cisco路由器基础配置 1.    路由器的运行模式:Router>    用户模式,通常用来查看统计信息,但不能修改路由器的设置.Router#    特许模式,可以查看并修改 ...

  10. VUE报表开发

    因为在项目中经常开发一些报表,并且业务.逻辑其实都有大部分的重复部分. 所以将这些常用的模块抽象出来.并且可视化操作.封装成一款报表开发工具. 先看一下项目的一些效果:数据单项绑定 可视化操作: 数据 ...