CSS背景

概念：CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

属性 描述
background-attachment  背景图像是否固定或者随着页面的其余部分滚动
 background-color  设置元素的背景颜色
 background-image 把图片设置为背景 
 background-position 设置图片的起始位置 
 background-repeat

设置背景图片是否及如何重复
background-size 规定背景图片的尺寸
 background-origin 规定背景图片的定位区域 
 background-clip 规定背景的绘制区域  
<!--background.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="style.css" type="text/css" rel="stylesheet">

</head>

<body>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

    <p>test the background-color</p>

</body>

</html>
/*style.css*/

body{

    /*background-color: khaki;*/

    background-image: url("1.jpg");

    background-repeat: no-repeat;   /*图片不允许重复*/

    /*background-position: right top;*/

    /*background-position: 100px 100px;*/

    /*background-attachment: fixed;*/

    background-size: 100px 100px;

    /*right和center*/

}

p{

    width: 150px;

    padding: 10px;

    background-color: blueviolet;

}

三、CSS样式——背景的更多相关文章

  1. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  2. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  3. 第六篇 CSS样式 背景、背景图、文本、链接

    元素背景.文本(字体)样式.链接 这里我们只学习常用的一些,更多的扩展就要同学们自己去了解,或者下方评论. 这里我们为了简便,用的是CSS的内嵌形式.   元素背景: 我们写模块的时候,有的时候为了区 ...

  4. css样式背景图片设置缩放

    一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

  5. 前端学习笔记--CSS样式--背景和超链接

    1.背景 2.超链接: 举例:

  6. css样式之背景图片

    1.css样式背景之使用图片来做为背景 example: <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  7. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  8. PHP.9-HTML+CSS（三）-CSS样式

    CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...

  9. Bootstrap入门（三）<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

随机推荐

  1. C语言权威指南和书单 - 初学者

    注:点击标题免费下载电子书 1. C Primer Plus (5th Edition) 2. A Book on C C Programming: A Modern Approach (2nd Ed ...

  2. 推荐一个免费的在线IDE和终端

    墙裂推荐!支持众多语言,方便学习,测试,地址如下 https://www.tutorialspoint.com/codingground.htm

  3. s21day23 python笔记

    s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...

  4. python3-datetime.date详解(一)

    datetime是python操作日期和时间的内置模块. python有两种日期.时间对象:“naive”和“aware”.前者由于忽略了实际情况更容易理解,操作.在任何时间空间内,它的值都取决于一个 ...

  5. 今天在2cto网站看到一个有关try{}catch(){}finally{}语句中含有return的讲解，理解很透彻。

    publicclassTrycatchTest{ publicstaticvoidmain(String[]args){ System.out.println("x:"+newTr ...

  6. 那些年,很多人没看懂的Python内置函数

    Python之所以特别的简单就是因为有很多的内置函数是在你的程序"运行之前"就已经帮你运行好了,所以,可以用这个的特性简化很多的步骤.这也是让Python语言变得特别的简单的原因之 ...

  7. 学习笔记CB006:依存句法、LTP、n元语法模型、N-最短路径分词法、由字构词分词法、图论、概率论

    依存句法分析,法国语言学家L.Tesniere1959年提出.句法,句子规则,句子成分组织规则.依存句法,成分间依赖关系.依赖,没有A,B存在错误.语义,句子含义. 依存句法强调介词.助词划分作用,语 ...

  8. Spark源码系列:DataFrame repartition、coalesce 对比

    在Spark开发中,有时为了更好的效率,特别是涉及到关联操作的时候,对数据进行重新分区操作可以提高程序运行效率(很多时候效率的提升远远高于重新分区的消耗,所以进行重新分区还是很有价值的).在Spark ...

  9. CodeForce 517 Div 2. C Cram Time

    http://codeforces.com/contest/1072/problem/C C. Cram Time time limit per test 1 second memory limit ...

  10. 《Self-Attention Generative Adversarial Networks》里的注意力计算

    前天看了 criss-cross 里的注意力模型  仔细理解了  在: https://www.cnblogs.com/yjphhw/p/10750797.html 今天又看了一个注意力模型 < ...