11种常用css样式之background学习
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">
你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌 Your stress comes from: unable to discipline yourself, but pretending to work hard;
</div>
<!-- <p>你的压力来源于：无法自律，只是假装很努力；现状跟不上内心的欲望；所以你焦虑又恐慌 Your stress comes from: unable to discipline yourself, but pretending to work hard;</p>*50 回车50 -->
</body>
</html>
11种常用css样式之background学习的更多相关文章
- 11种常用css样式之border学习
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
- 11种常用css样式之开篇文本字体学习
常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- Day 31：CSS选择器、常用CSS样式、盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 常用css样式(布局)
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...
- 几种常用CSS3样式
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...
随机推荐
- ninject 的 实现 的 理解
mvc 用ninject 好像 有 的. 加上 ClassDiagram .ClassDiagram1.rar Represents a site on a type where a value c ...
- 团队项目——Beta冲刺
团队项目-Beta冲刺 作业所属课程 软件工程 作业要求 团队项目-Beta冲刺 团队名称 运气王团队 作业目标 (1)SCRUM部分(2)PM 报告 成员列表: 1.团队成员的学号列表 |何宸锐(组 ...
- Python单元测试unittest测试框架
本文的主题是自动化测试框架的实现,在实现之前,先了解一下关于unittest模块的相关知识: Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回 ...
- js之new的原理
在调用new的过程中会发生以上四件事情: 1.新生成了一个对象 2.链接到原型 3.绑定this 4.返回新对象 function create() { let obj = {} //创建一个新对象 ...
- Promise函数的使用
最近在做批量打印并监控显示打印进度的功能,用到了很多异步函数,很多异步函数嵌套在回调函数里面,层层嵌套,导致代码可阅读性与可维护性变得十分糟糕,而且由于都是异步执行的函数,无法知道什么时候能回调结束, ...
- LeetCode19 移除倒数第N个元素
链接 Remove Nth Node From End of List 难度 Medium 描述 Given a linked list, remove the n -th node from the ...
- webdriver高级应用 -无人干预地自动上传文件
本节主要介绍通过程序代码无人干预地上传文件附件,并进行提交操作. 1.使用send_keys方法上传文件 #!/usr/bin/env python # -*- coding: utf-8 -*- # ...
- python中常见的报错信息
python中常见的报错信息 在运行程序时常会遇到报错提示,报错的信息会提示是哪个方向错的,从而帮助你定位问题: 搜集了一些python最重要的内建异常类名: AttributeError:属性错误, ...
- 快速下载Keil μVision MDK-Arm包
搜索"MDK Pack",找到Keil官网的MDK包下载页,如下图所示 Keil的官网的域名是Keil.com,下图搜索结果的URL的域名部分被红框标记,那是Keil官网的域名 以 ...
- Git 小课堂 004
rebase--变基,就是这个可能会把事情搞得一团糟的操作. 对于变基,我只能说,需要一个配合默契的团队,你们心灵想通,互相了解,然后你们会做出非常漂亮的事情.对于使用变基且几乎不会出问题的团队,我一 ...