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. JavaScript创建对象的方式

    一.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程. 考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的 ...

  2. 运行Tomcat报错 解决方法

    The APR based Apache Tomcat Native library which allows optimal performance in production environmen ...

  3. branchynet

    提前退出 神经网络 https://gitlab.com/kunglab/branchynet/tree/master 修改梯度 gradients 方法,参考: https://stackoverf ...

  4. gdb 调试 python

    gdb 版本 >7 的 对python调试有特别支持,参考: https://docs.python.org/devguide/gdb.html?highlight=gdb https://bl ...

  5. next()方法 执行下一个中间件 类似than

    next()方法出现在express框架中的中间件部分,由于node异步的原因,我们需要提供一种机制,当当前中间件工作完成之后,通知下一个中间件执行,因此一个基本的中间件应该是这种形式 var mid ...

  6. Salesforce Invoking Http Callouts and Testing Http Callouts

    本文参考官方文档和zero zhang的博客: https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/ape ...

  7. Spring ＡＯＰ详解

    一.前言 在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...

  8. CSS 中的 !important 属性

    !important的作用就是提高指定样式属性的优先级. 一般情况下,我们对同一个元素设置样式属性的时候,对同一个属性设置了两个甚至多个值,像下面这样: p { /* 例1 */ color:red; ...

  9. Java泛型相关总结（上）

    最近在看<Java核心技术>泛型相关的部分,总结下. 泛型程序设计是什么? 泛型编程(generic programming)是计算机编程中的一种风格,类型通过参数指定.意味着编写的代码可 ...

  10. 用 EPWA 写一个 图片播放器 PicturePlayer

    用 EPWA 写一个 图片播放器  PicturePlayer  . 有关 EPWA,见 <我发起并创立了一个 EPWA 的 开源项目>   https://www.cnblogs.com ...