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. [bzoj2815] [洛谷P2597] [ZJOI2012] 灾难

    Description 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过 ...

  2. Commvault逻辑架构及组件说明

    在学习和使用Commvault软件的过程中,经常会碰到一些术语和缩写,初学者可能并不是很清楚这些术语和缩写的具体含义,接下来我们梳理一下Commvault软件中这些属于和缩写的含义,有可能一次不能梳理 ...

  3. 表单提交，action 地址问题

    jsp 页面如下: <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  4. show processlist详解

    摘自:https://blog.csdn.net/sunqingzhong44/article/details/70570728?utm_source=copy 如果您有root权限,您可以看到所有线 ...

  5. Mavn 项目 引入第三方jar包 导致ClassNotFoundException

    案例 我有一个Maven构建的项目,项目模块之间有依赖关系,我需要用到一个本地的jar包,而该jar包不能通过配置pom.xml文件从远程仓库自动下载,于是我直接导入该jar包到其中一个项目,不通过p ...

  6. python 学习笔记2 匿名函数

    # 匿名函数 lambda a,b : a+b# a.j.from functools import reduce students = [{'name': '张三', 'age': 18, 'hei ...

  7. Ubuntu解决 MariaDB无密码就可以登录的问题

    使用apt-get来安装mysql,安装好之后发现安装的是 MariaDB,如下,无需密码既可以登录了.即使使用mysqladmin或mysql_secure_installation 设置好密码,用 ...

  8. OpenGL学习网址2

    http://www.opengpu.org/forum.php?mod=viewthread&tid=7525

  9. tornado自定义分页扩展

    一.分页扩展类 #! /usr/bin/env python # -*- coding:utf-8 -*- # __author__ = "TKQ" class Paginatio ...

  10. Codeforces_805

    A.当l == r时,肯定输出这个数就可以了,当存在两个或两个以上连续的数时,2肯定是最多的数,或最多的数之一. #include<bits/stdc++.h> using namespa ...