background-origin属性怎么用

background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。

background-origin属性怎么用

CSS3 background-origin属性

作用:规定背景图片的定位区域。

说明:设置或检索对象的背景图像计算 时的参考原点(位置)。

语法:

background-origin: padding-box|border-box|content-box;

padding-box:背景图像相对于内边距框来定位。 

border-box:背景图像相对于边框盒来定位。 

content-box:背景图像相对于内容框来定位。    

CSS3 background-origin属性的使用示例

 div{border:1px solid black;padding:35px;background-image:url('https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;}

background-origin:border-box:

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

background-origin:content-box:

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

效果图:

1.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注创想鸟相关教程栏目!!!

以上就是background-origin属性怎么用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614019.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:01:21
下一篇 2025年12月24日 04:01:40

相关推荐

  • background-size属性怎么用

    background-size属性是用来设置背景图片尺寸大小的,可以通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。 CSS background-size属性 作用:规定背景图片的尺寸。 说明:在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在…

    好文分享 2025年12月24日
    000
  • CSS中伪类和伪元素的详细介绍(代码示例)

    本篇文章给大家带来的内容是关于CSS中伪类和伪元素的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、伪类 伪类包含两种:状态伪类(UI 伪类)和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。 在与用户的交互过程中元素的状态是动态变化的,因此该元素…

    好文分享 2025年12月24日
    000
  • CSS实现页面底部固定的方法介绍(附代码)

    本篇文章给大家带来的内容是关于css实现页面底部固定的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底…

    好文分享 2025年12月24日
    000
  • css权重是什么?css权重的介绍

    本篇文章给大家带来的内容是关于css权重是什么?css权重的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、什么是css权重?css6大基础选择器 css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然…

    2025年12月24日
    000
  • css3如何实现元素环绕中心点布局(代码示例)

    本篇文章给大家带来的内容是关于css3如何实现元素环绕中心点布局(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果如图: 代码实现: *{ margin: 0; padding: 0; box-sizing: border-box; } .surround-box, …

    2025年12月24日
    000
  • 彻底理解CSS中视觉格式化模型(附示例)

    本篇文章给大家带来的内容是关于彻底理解css中视觉格式化模型(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 不论你在什么时候开始,重要的是开始之后不要停止。 前言 对于部分前端工程师来讲,有时候CSS令他们很头疼,明明设置了某个样式,但是布局就是不起作用。 如果你也有这种…

    2025年12月24日
    000
  • CSS中display: inline-block的用法解析

    本篇文章给大家带来的内容是关于css中display: inline-block的用法解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 迷之间隙 我们创建一个导航列表,并将其列表 item 设置为 inline-block,主要代码如下: 我 我 我.nav { backgrou…

    2025年12月24日
    000
  • CSS3有哪些新特性?CSS3新特性详解

    本篇文章给大家带来的内容是关于css3有哪些新特性?css3新特性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐教程:css教程】 CSS3有哪些新特性? 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 d…

    好文分享 2025年12月24日
    000
  • css如何给边框添加图像?css设置边框图像

    今天将和大家介绍如何利用css给元素的边框添加图像,css只要是通过设置border-image属性或者其相关属性就可以给元素的边框添加图像。下面我们来看看本篇文章的具体内容。 border-image属性的简单介绍 在css中我们可以通过设置border-image属性来定义边框要使用的图像,而不…

    2025年12月24日 好文分享
    000
  • CSS3中如何实现图片翻转

    今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能,CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现 【推荐课程:CSS3教程】 案例分析 立即学习“前端免费学习笔记(深入)”; 图片翻转效果的思路:先利用position定位将两个…

    2025年12月24日
    000
  • CSS3新增了哪些属性

    CSS3新增的属性有:1、文本阴影;2、背景渐变;3、颜色透明度;4、元素旋转;5、多列布局;6、字体改变等等。 本文操作环境:Windows7系统、Dell G3电脑、css3版。 今天将和大家介绍CSS3中的新增属性,具有一定的参考价值,希望对大家有所帮助 最新版本的CSS3的出现使Web设计更…

    2025年12月24日 好文分享
    000
  • 如何利用CSS3实现input 输入框动画样式库

    本篇文章给大家带来的内容是关于如何利用css3实现input 输入框动画样式库,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签labe…

    2025年12月24日
    000
  • css3动画属性有哪些

    css3动画属性有animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count等。 本文操作环境:windows7系统、Dell G3电脑、CSS3。 本篇文…

    2025年12月24日
    000
  • css计数器(counter)是什么

    本篇文章给大家带来的内容是介绍css计数器(counter)是什么,让大家简单的了解css计数器的相关属性。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 css计数器是什么? 计数器是css3提供的一个强大的工具,是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对…

    2025年12月24日
    000
  • css如何使用计数器给元素自动编号?css计数器的使用(代码示例)

    css如何使用计数器给元素自动编号?本篇文章就给大家介绍设置和使用css计数器的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在之前的文章【css计数器(counter)是什么】中我们简单介绍了css计数器的相关属性,以及通过代码实例来简单了解了一下css计数器的使用,本篇…

    2025年12月24日
    000
  • css3的@supports是什么?如何使用

    本篇文章给大家带来的内容是介绍css3的@supports是什么?如何使用,让大家对@supports有一个初步的了解。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 css3 @supports是什么?有什么用? @supports是CSS3新引入的规则之一,主要用于检测当前浏览…

    2025年12月24日
    000
  • css3的@keyframes是什么

    本篇文章给大家带来的内容是介绍css3的@keyframes是什么,让大家简单了解@keyframes可以如何使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 CSS3 @keyframes是什么?有什么用? @keyframes是CSS3的一种规则,可以用来定义CSS动画的一…

    2025年12月24日
    000
  • CSS3多媒体查询的简单介绍(代码示例)

    本篇文章给大家带来的内容是关于css3多媒体查询的简单介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS2多媒体查询:   @media规则在css2中有介绍,针对不同媒体类型(包括显示器,便携设备,电视机,等等)可以定制不同的样式规则。 CSS3多媒体查询: …

    2025年12月24日
    000
  • css3如何设置placeholder的样式

    本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下placeholder是什么? placeholder是H…

    2025年12月24日 好文分享
    000
  • css3的:out-of-range和:in-range伪类有什么用?(代码示例)

    本篇文章给大家带来的内容是介绍css3的:out-of-range和:in-range伪类有什么用?(代码示例),让大家了解:out-of-range伪类和:in-range伪类的作用和使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 css3 :in-range伪类 :i…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信