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属性的使用示例

nbsp;html> 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属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2888978.html

(0)
上一篇 2025年3月10日 21:16:59
下一篇 2025年3月10日 21:17:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • text-shadow属性怎么用

    text-shadow属性用于为文本添加阴影效果,通过该属性我们可以设置水平或垂直阴影的位置,模糊距离及颜色。 CSS3  text-shadow属性 作用:向文本应用阴影。 说明:设置或检索对象中文本的文字是否有阴影及模糊效果。 语法: …

    2025年3月10日
    200
  • word-wrap属性怎么用

    word-wrap属性用于将长单词或 url 地址在容器的边界处进行自动换行。 CSS3  word-wrap属性 作用:允许长单词或 URL 地址换行到下一行。 说明:设置或检索当内容超过指定容器的边界时是否断行。 语法: word-wr…

    2025年3月10日
    200
  • transition属性怎么用

    transition属性css3中的是一个简写属性,用于实现过渡效果。它设置了需要设置过渡效果的css属性名称,完成的时间、速度曲线及开始时间。 CSS3  transition属性 作用:设置元素的过渡属性 说明:复合属性。检索或设置对象…

    2025年3月10日
    200
  • resize属性怎么用

    resize属性用于指定一个元素是否是由用户调整大小,其使用语法是“resize: none|both|horizontal|vertical;”。 本文操作环境:Windows7系统、HTML5&&CSS3版、Dell G…

    2025年3月10日
    200
  • box-sizing属性怎么用

    box-sizing属性允许以特定的方式定义匹配某个区域的特定元素,该属性的使用语法是“box-sizing: content-box|border-box|inherit;”。 本文操作环境:windows7系统、CSS3版、Dell G…

    2025年3月10日
    200
  • outline-offset属性怎么用

    css3的outline-offset属性用于对轮廓进行偏移,并在边框边缘进行绘制;可以通过length值设置轮廓与边框边缘的距离。 CSS3  outline-offset属性 作用:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 说明…

    2025年3月10日
    200
  • css3 animation属性怎么用

    css3 animation属性是一个简写属性,通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。 css3 animation属性 作用:animation 属性是一个…

    2025年3月10日
    200
  • CSS3中的animation-name属性怎么用

    CSS3中的animation-name属性的用法:【animation-name: keyframename|none】。该属性用来给@keyframes动画规定名称。 css3 animation-name属性 作用:animation…

    2025年3月10日
    200
  • animation-duration属性有什么用

    animation-duration 属性是用来定义动画完成一个周期所需要的时间,以秒或毫秒计;当值为0是,表示无动画效果。 CSS3  animation-duration属性 作用:animation-duration 属性定义动画完成…

    2025年3月10日
    200
  • animation-timing-function属性有什么用

    animation-timing-function属性是用来设置动画的速度曲线,它可以设置动画速度为匀速、以低速开始、以低速结束、以低速开始和结束、先慢后快再变慢或者是自己自定义数值。 CSS3  animation-timing-func…

    2025年3月10日
    200

发表回复

登录后才能评论