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. java小心机(3)| 浅析finalize()

    每天进步一丢丢,连接梦与想 如果你停止就是谷底,如果你还在努力就是上坡 系列文章 java"小心机"(1)[资源彩蛋!] java小心机(2)| 重载和构造器的小细节 预备知识 J ...

  2. 个人第四次作业：Alpha项目测试

    个人第四次作业:Alpha项目测试 格式描述 详情 这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience ...

  3. jenkins集成jmeter-进阶篇

    1.gitlab自动触发jenkins构建 1⃣️安装插件: 2⃣️新建工程,设置git url,build when a change is pushed auto.sh /bin/sh echo ...

  4. IdentityServer4身份认证授权入门

    一.简介 IdentityServer4 是为ASP.NET Core 系列量身打造的一款基于 OpenID Connect 和 OAuth 2.0 认证框架 特点: 1.认证服务 2.单点登录登出( ...

  5. Linux 常用工具openssh之scp

    前言 scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read  ...

  6. NodeJS+axios上传图片

    前端js部分 changeEvent (e) { ------ //change事件方法 let oFile = e.target.files[0] ------ //获取文件对象 let param ...

  7. TypeScript躬行记（6）——高级类型

    本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型.类型别名.类型保护等. 一.交叉类型 交叉类型(Intersection Type)是将多个类型通过“&”符号合并成一个新 ...

  8. 5.场景3:高可用性使用分布式虚拟路由(DVR)

    这个场景描述了使用ML2插件和Open vSwitch的OpenStack网络服务的高可用性分布式虚拟路由(DVR)实现.示例配置创建了一个Flat外部网络和一个VXLAN项目(租户)网络.然而,这种 ...

  9. python笔记18（复习）

    今日内容 复习 内容详细 1.Python入门 1.1 环境的搭建 mac系统上搭建python环境. 环境变量的作用:方便在命令行(终端)执行可执行程序,将可执行程序所在的目录添加到环境变量,那么以 ...

  10. 关于RiscV的一些资料整理

    1. 基于RISC-V架构的开源处理器及SoC研究综述 https://mp.weixin.qq.com/s/qSD-q8y0_MY8R0MBA85ZZg 原文链接: https://blog.csd ...