css中background-origin属性的使用

从零学习前端开发 2018-03-30

background-origin用来规定元素背景图像的相对定位位置，它有三个属性值：

1、border-box

border-box表示元素背景图像相对于border区域开始定位。

代码如下：

<!doctype html>
<html>
    <head>
        <style>
	    *{margin:0;padding:0;}
            .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br />font-size:100px;font-weight:bold;background-origin:border-box;]
        </style>
   </head>
   <body>
       <div class="box "></div>
   </body>
</html>

效果如下：

从上图可以看出,元素的背景图像从边框区域开始定位。

2、padding-box

padding-box表示元素背景图像相对于padding区域开始定位。

代码如下：

<!doctype html>
<html>
    <head>
        <style>
	    *{margin:0;padding:0;}
            .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br />font-size:100px;font-weight:bold;background-origin:padding-box;]
        </style>
   </head>
   <body>
       <div class="box "></div>
   </body>
</html>

效果如下：

css中background-origin属性的使用

从上图可以看出：元素背景图像从padding区域开始定位。

3、content-box

content-box表示元素背景图像相对于content区域开始定位。

代码如下：

<!doctype html>
<html>
    <head>
        <style>
	    *{margin:0;padding:0;}
            .box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br />font-size:100px;font-weight:bold;background-origin:content-box;]
        </style>
   </head>
   <body>
       <div class="box "></div>
   </body>
</html>

效果如下：

从上图可以看出：元素的背景图像初始位置从content区域开始定位。

总结，background-origin属性定义了背景图像的相对定位位置，这个位置可以用background-position来改变，而且元素背景图像的区域不会因此被限定住，只对元素背景图像起作用。如果元素使用background-attachment属性时，该属性会失效。

从零学习前端开发

从零学习前端开发

相关推荐

前端如何实现.md文件转换成.html文件

.md文件是markdown的一种标记语言，和html比较起来，更简单快捷，主要体现在：标记符的数量和书写上。下面介绍如何实现将.md文件转换成.html文件。

lupeng / 0评论 2020-11-14

10个对Web开发人员有用的HTML文件上传技巧

上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 HTML文件上传支持的10种用法，希望对你有用。我们可以将input 类型指定为file，以在Web应用程序中使用文件上传功能。

sjcheck / 0评论 2020-11-10

手把手教你搭建Vue服务端渲染项目

好了，下面开始正文。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有

sjcheck / 0评论 2020-11-03

快速指南：如何创建基于Python的爬虫

Web抓取的使用正在积极增加，特别是在大型电子商务公司中，Web抓取是一种收集数据以竞争，分析竞争对手和研究新产品的方式。Web抓取是一种从网站提取信息的方法。在本篇文章中，学习如何创建基于Python的刮板。深入研究代码，看看它是如何工作的。在当今的大数

meylovezn / 0评论 2020-08-28

HTML知识点（一）

五大主流浏览器：火狐浏览器?————因为内核不同???不是一个标准，而是一个标准的集合。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接

owhile / 0评论 2020-08-18

再见HTML ! 用纯Python就能写一个漂亮的网页

大家好，今天给大家带来一个炫酷的神器！我们在写一个网站或者一个网页界面的时候，需要学习很多东西，对小白来说很困难！要懂后端，比如Python里面的Django或者Flask，或者是Java里面的SpringBoot. 其实我就给老板做一个简单的交互的页面，

Francismingren / 0评论 2020-08-17

在html页面中引入另一个html页面

我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。如果有些浏览器本地

pythonclass / 0评论 2020-07-29

用urllib库几行代码实现最简单爬虫

使用urllib.request()请求一个网页内容，并且把内容打印出来。# 存取到内存当中是bytes流，使用read方法把rsp的内容读取出来，赋值给变量html。# 使用decode解码成我们能够看懂的格式。D:\ProgramData\Anacon

sunzhihaofuture / 0评论 2020-07-19

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版

爱读书的旅行者 / 0评论 2020-07-07

HTML 语义

HTML 并不简单，它是典型的“入门容易，精通困难”的一部分知识。深刻理解 HTML 是成为优秀的前端工程师重要的一步。语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。现在很多的前端工程师写起代码来，多数都不用复杂的语义标签， 只靠 div

行吟阁 / 0评论 2020-07-05

如何理解HTML语义化的？

通常由PHP后端来写HTML，但是他们并不会CSS，于是就用table来进行布局。但我们都知道，table其实是用来展示表格的，这一条就与语义化严重相悖。后来前端慢慢分离成一个单独的岗位，他们会使用DIV+CSS布局，并且主要利用float和绝对定位进行布

tianqi / 0评论 2020-07-05

python之发送邮件----html + 附件

补充说明：文章两次邮件代码都是以163邮箱作为例子，不同的邮箱发送 连接该邮箱的smtp服务代码不进行备注说明了，详情说明科参考代码下面地址，或者博主上一篇文本类型代码import smtplibfrom email.mime.text import MI

行吟阁 / 0评论 2020-07-04

css基础教程

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式

冰蝶 / 0评论 2020-07-04

C# 使用 WebBrowser 实现 HTML 转图片功能

在 .NET 平台上，我们有多种方式可以将一段 HTML 文本转换为一张图片：HTML Renderer、SelectPdf、Aspose.Html等。WebBrowser 具备显示 HTML 的功能，又因为其从 Control 类型派生，所以包含Draw

lyg0 / 0评论 2020-07-04

JavaScript 事件

HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。在上面的例子

owhile / 0评论 2020-07-04

Java学习（十二）

今天安装讲师推荐下载了一个叫Hbuiler X的IDE，并且学习了选择器的知识。选择器1选择器2{}//同时满足2个选择器条件的才会使用大括号内的样式也可以选中全页面统一样式。static{}中的代码叫做静态代码块，在类加载时执行，且只执行一次，从上而下的

opspider / 0评论 2020-06-28

结合puppeteer和egg.js搭建html转pdf或png的node中间层服务。

后面经过使用链接池的优化，chrome的耗时成功降下来。由于项目比较看重时间损耗，所以最终选择puppeteer。本文将讲述puppeteer的一些优化措施，以及怎么结合egg.js搭建成最终的服务器。

lengyu0 / 0评论 2020-06-28

JavaScript的加载顺序

在HTML中，JavaScript可以写到程序的任何地方：<HTML>标签前， <BODY>标签前，<BODY>标签里面, <BODY>标签后, <HTML> 标签后.<h2 id =‘pp

tianqi / 0评论 2020-06-21

html的基本标签

当我们需要写页面的时候，肯定会用到一些html的基本标签，现在我们就来罗列下我们常用的html的基本标签有哪些。--申明文档类型 html-->. --申明编码集-->　　 <style></style><!--身

dadaooxx / 0评论 2020-06-16

Html常用代码

　　标题的对齐 <H?　　区分的对齐 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>. 　　预定格式的宽度<PRE WIDTH=?　　改变字体大小 <FONTSIZE=+|-?

huzijia / 0评论 2020-06-16

20194302实验四 Python综合实践

笔趣看是一个盗版小说网站，这里有很多起点中文网的小说，该网站小说的更新速度稍滞后于起点中文网正版小说的更新速度。并且该网站只支持在线浏览，不支持小说打包下载。因此，本次实战就是从该网站爬取并保存一本名为《一念永恒》的小说，该小说是耳根已完结的一部玄幻小说。

dadaooxx / 0评论 2020-06-14

学前端,css与javascript重难点浅析

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。CSS是将样式信息与网页内容分离的一种标记

二毛妮子 / 0评论 2020-06-14

PHP htmlentities() 函数

php高佣联盟www.cgewang.com$str = "< W3CSh°°§>";echo htmlentities;?htmlentities() 函数把字符转换为 HTML 实体。规定要转换的字符串。规定如何处理引号

行吟阁 / 0评论 2020-06-14

前端之HTML

前端和后端，站在代码执行位置的角度来区分的话，服务端所执行的代码被称为后端代码，也就是这部分代码是在服务器上运行的。这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页。htm

qsdnet我想学编程 / 0评论 2020-06-13

PHP html_entity_decode() 函数

php高佣联盟www.cgewang.com$str = "&lt;&copy; W3CS&ccedil;h&deg;&deg;&brvbar;&sect;&gt;";ec

爱好HtmlCssJs / 0评论 2020-06-13

HTML代码片段

<input type="button" value="前进" onClick="history.go( 1 );return true;">. 也就是在输入数据时不可以使用其他输入法

玫瑰小妖 / 0评论 2020-06-13

HTML中怎么使文字各种居中对齐？（代码示例）

本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。前端10K面试准备，最完整面试真题分享（含答案）！text-align 属性规定元素中的文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 just

gufudhn / 0评论 2020-06-12

前端入门学习，就从html开始！

不说多的，就从html开始，官方定义：用于定义一个网页结构的基本技术。HTML 用于表示你的网页内容是应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一亦或是你定义的新元素。也有一部分标签中不需要包含文本，这些标签称为空

niehanmin / 0评论 2020-06-12

通过css润色html表格

--th和td都是单元格，th里的内容会默认加粗并且居中 -->. 这样是不是高档了很多。

coulder / 0评论 2020-06-09

html实现下拉框、switch开关、复选框效果

width: 90px;margin: 50px;width: 90px;background-color: #17a6b5;height: 40px;cursor: pointer;display: flex;justify-content: cente

haocxy / 0评论 2020-06-09

PHP highlight_file() 函数

语法通过使用 HTML 标签进行高亮。规定要显示的文件。否则，如果成功则返回 TRUE，如果失败则返回 FALSE。自 PHP 4.2.1 起，该函数现在也受 safe_mode 和 open_basedir 影响。然而，在 PHP 5.4 中 safe_

爱好HtmlCssJs / 0评论 2020-06-08

webpack 之压缩js代码 和html文件

2.压缩html文件，html文件不需要处理兼容问题，压缩文件只需要在plugins中的HtmlWebpackPlugin中配置minify即可

gufudhn / 0评论 2020-06-06

JS实现HTML标签转义及反转义

简单说一下业务场景，前台用户通过input输入内容，在离开焦点时，将内容在div中显示。这时遇到一个问题，如果用户输入了html标签，则在div显示中，标签被解析。由于是纯前端操作，不涉及后端，因此需要通过js对输入内容进行转义。因为innerText会获

nercon / 0评论 2020-06-02

JavaScript 简版-菜鸟中的菜鸟4

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。<button onclick="this.i

xiyang / 0评论 2020-06-01

JavaScript 简版-菜鸟中的菜鸟2

JavaScript 没有任何打印或者输出的函数。使用window.alert()弹出警告框。使用document.write()方法将内容写到 HTML 文档中。使用innerHTML写入到 HTML 元素。使用console.log()写入到浏览器的控

麋鹿麋鹿迷了路 / 0评论 2020-05-31

HTML 在线编辑器

众所周知，一款好的编辑器能显著地提升程序员敲代码的速度。然而，在某些情况下，你既没有一款安装好的编辑器，又没有管理员权限去安装。这时候如果你不想憋屈地用记事本来写代码，就需要用到在线编辑器了。对于写HTML的兄弟来说，菜鸟教程的HTML在线编辑器就很不错。

pythonclass / 0评论 2020-05-30

VSCode编辑器使用技巧：快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。-- 输入html或者html:5生成页面模板 -->. -- 输入link:css引入样式 -->. -- 输入script:src引入js -->. --

黎豆子 / 0评论 2020-05-30

HTML的技巧坑

本教程包含了数百个 HTML 实例。使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置

haocxy / 0评论 2020-05-29

html table表格标签内容如何居中显示？表格的align属性的用法介绍

本篇文章主要的介绍了关于HTML 表格table标签的居中使用，还有关于align属性在table表格标签中的使用方法，可以帮助表格对齐和表格中的文本对齐。接下来让我们来看看这篇文章吧。align 属性规定表格相对于周围元素的对齐方式。通过运用align属

lyg0 / 0评论 2020-05-28

Javascript 在html中的嵌入方式

Javascript 作为客户端的脚本语言，主要的用途就是帮助html处理部分交互逻辑。Javascript语言同其他脚本语言一样，通过控制语句、函数、对象方法属性等来实现编程。先来介绍javascript是如何同html交互的，也就是嵌入的方式。根据ja

haocxy / 0评论 2020-05-28

Jmeter查看结果树之CSSJQuery_Tester和HTML使用（五）

CSSjQuery_Tester作用:CSS/JQuery测试程序只适用于文本响应，可以根据JSoup或Jodd对响应数据进行过滤和查看。HTML Source formatted：如果选择了HTML Source 格式化视图选项，则呈现由Jsoup格式化

Boy木 / 0评论 2020-05-28

Python实现word批量转HTML-诺禾=诺禾致源

python-docx是用于创建和更新Microsoft Word文件的Python库。它可以针对word做很多操作。比如打开文件、写入内容、编写内容样式、解析内容、读取内容等等。主要就是针对word做的一款功能库。下面一起来说一下代码。首先是做了一个声明

vs00ASPNET / 0评论 2020-05-25

小小白的第一个前端项目（HTML、CSS）

于是在前辈们指导下，我颤颤巍巍开始写，导航栏一上来就下不了手，动画就更不要提。后来，把整个页面写出来后，比吃十顿火锅还开心。下面正式开始，先上图：。拆分出的六个部分可用基础所学的 HTML 和 CSS 写出。最难的小推车动画部分使用的是 CSS3 动画。

kennsand / 0评论 2020-05-21

script标签中defer和async的区别

正常的html加载解析顺序是同步进行的，也就是浏览器加载html成功之后开始解析文档，这个时候如果遇到script文件就会暂停解析html文档，而下载script文件并加以解析，当解析完成后再开始继续解析html文档。defer是一个异步加载属性，当htm

niehanmin / 0评论 2020-05-19

如何理解DOM

首先DOM全称为,是针对HTML和XML的API。可以理解为DOM就是一系列功能集合。从一下几个方面理解。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容，第二阶段涉及浏览器执行渲染。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。DOM的

liaoxuewu / 0评论 2020-05-19

JavaScript基础学习

JavaScript 是一种轻量级的编程语言。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。主要还是用的5.1和6.0. js是以分号作为语句的结束。#js代码的书写位置。尽管 ECMAScript 是一个重要的标准，但它并不是

行吟阁 / 0评论 2020-05-18

如何让html引用公共布局（多个html文件公用一个header.html和footer.html）

如何实现多个.html静态页，引用同一个header.html和footer.html文件？并且，不会影响到其他页面对于公共文件的引用和使用；以上就是关于静态html文件，使用公共头部和尾部的解决办法之一。

niehanmin / 0评论 2020-05-16

HTML简单的伪装与造假

复制进去，然后回车确认，出现 true 后就表示设置成功。其实这行代码看名字就明白什么意思了：contentEditable=true，使内容可编辑。

qsdnet我想学编程 / 0评论 2020-05-14

前端开发-html

请求一次响应一次，--左侧菜单栏结束-->

hxmilyy / 0评论 2020-05-11

【小记事】如何设置vscode代码格式化时不要自动换行

最近一格式化就给我分好多行，好气哦(｀?

STPace / 0评论 2020-05-11