CSS学习笔记11 CSS背景

时间：2022-09-20 16:38:59

background-color：背景色

前面我们经常用background-color这个属性来设置元素的背景色，例如下面这条css可将段落的背景色设置为灰色

p {background-color: gray;}

如果想要元素的背景色向外延伸，则只需增加内边距即可

CSS学习笔记11 CSS背景

background-color可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

注意：background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

background-image：背景图像

除了可以为元素设置背景色之外，还可以用background-image属性为元素设置背景图像，其默认值是 none，表示元素背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(img/a.jpg);}

CSS学习笔记11 CSS背景

通常情况下背景应用于 body 元素。

注意：同background-color一样，background-image 也不能继承，事实上，所有背景属性都不能继承。背景图片会盖住背景颜色。也就是说背景图片的优先级要高于背景色。

background-repeat：背景重复

上面中的例子中，我们看到图片铺满了整个屏幕，如果需要设置是否需要平铺以及平铺的方向，可以使用background-repeat属性

属性值

效果

repeat

水平垂直方向上都平铺

repeat-x

水平方向上平铺

repeat-y

垂直方向上平铺

no-repeat

不平铺

CSS学习笔记11 CSS背景

background-position：背景定位

默认情况下，背景图片的位置的在元素的左上角，这时可以利用 background-position 属性改变图像在背景中的位置。

CSS学习笔记11 CSS背景

background-position可能的值

CSS学习笔记11 CSS背景

background-attachment：背景关联

scroll： 默认值，背景图像会随着页面其余部分的滚动而移动。
fixed：固定显示，相对于body固定。一般只用于body的背景设置。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS背景</title>

     <style type="text/css">

         body {

             background-image: url(img/a.jpg);

             background-repeat: no-repeat;

             background-attachment: fixed;

         }

     </style>

 </head>

 <body>

     <p>图像不会随页面的其余部分滚动。</p>

     <p>图像不会随页面的其余部分滚动。</p>

     ...

     <p>图像不会随页面的其余部分滚动。</p>

 </body>

 </html>

CSS学习笔记11 CSS背景

属性合写

可以将上面讲到的属性用background属性进行合写，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

background合写的顺序： 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS属性合写</title>

     <style type="text/css">

         body {

             background: yellow url(img/a.jpg) no-repeat scroll center top;

         }

     </style>

 </head>

 <body>

     <p>段落1</p>

     <p>段落2</p>

     ...

     <p>段落20</p>

 </body>

 </html>

CSS学习笔记11 CSS背景

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
table.MsoTableGrid
{mso-style-name:网格型;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-priority:39;
mso-style-unhide:no;
border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-border-insideh:.5pt solid windowtext;
mso-border-insidev:.5pt solid windowtext;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}

CSS学习笔记11 CSS背景的更多相关文章

  1. HTML&plus;CSS学习笔记 &lpar;11&rpar; - CSS盒模型

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  2. HTML&plus;CSS学习笔记 &lpar;7&rpar; - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML&plus;CSS学习笔记 &lpar;12&rpar; - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  4. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  5. DIV&plus;CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  6. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  7. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  8. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  9. CSS学习笔记--Div&plus;Css布局（div&plus;span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

随机推荐

  1. hdu1003 dp

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1003 #include<cstdio> #include<algorit ...

  2. hdu 4584 水题爽一发 &ast;

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  3. C&num; 多线程&lpar;lock&comma;Monitor&comma;Mutex&comma;同步事件和等待句柄&rpar;

    本篇从 Monitor,Mutex,ManualResetEvent,AutoResetEvent,WaitHandler 的类关系图开始,希望通过本篇的介绍能对常见的线程同步方法有一个整体的认识,而 ...

  4. CAN总线

    1.CAN(controller area network) LAN(local area network)局域网 2.CAN等通信协议的开发,使多种LAN通过网关进行数据交换得以实现.如应用在汽车电 ...

  5. Spring MVC 解决无法访问静态文件和&quot&semi;全局异常处理&quot&semi;

    我们都知道,Spring MVC的请求都会去找controller控制器,若果我们页面中引入了一个外部样式,这样是没效果的, 我们引入样式的时候是通过<like href="...&q ...

  6. 根据HttpServletRequest获取用户真实IP地址

    原因: 当我们通过request获取客户端IP时,自身服务器通常会为了保护信息或者负载均衡的目的,对自身服务器做反向代理.此时如果我们通过request.getRemoteAddr();可能获取到的是 ...

  7. 基于Kubernetes 构建&period;NET Core 的技术体系

    很多公司技术支持岗位的工作,如配置域名,部署环境,修改复位配置,服务重启,扩容缩容,梳理和完善监控,根据开发的需要查找日志等工作,需要和开发进行大量的沟通,如什么是外网域名,什么是内网域名.A nam ...

  8. js深浅拷贝

    作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况.通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况. 浅拷贝 首先可以通过O ...

  9. C&plus;&plus; 数组和字符串

    数组和字符串的基本知识 目录 一.数组的声明 二.字符串 一.数组的声明 1.1.存储在每个元素中的值得类型: 1.2.数组名: 1.3.数组中的元素数. ];//short 数组元素值的类型,a数组 ...

  10. 使用sparksql往kafka推送数据

    一.相关配置参数 1.同级目录resource文件夹下配置 brokers_list=kafkaxxx02broker01:9092,kafkaxxx02broker02:9092,kafkaxxx0 ...

相关文章