css3,background-clip/background-origin的使用场景,通俗讲解_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:26:28
원래의
1663명이 탐색했습니다.

先不说background-clip/background-origin的用法,我们先来聊聊css背景方面的知识。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css背景知识点</title> 6     <style> 7         body,p{ 8             margin:0; 9             padding:0;10         }11         p{12             width:100px;13             height:100px;14             background-color:pink;15         }16     </style>17 </head>18 <body>19     <p></p>20 </body>21 </html>
로그인 후 복사

现在p的宽和高各是100px,颜色的范围也是100*100的对吧,如果给它加上padding-top:10px呢?那么现在的高是110,颜色的背景是100*110对不?

因为背景是包括padding的,这对理解为什么需要使用background-clip和background-origin至关重要。

透露一下,大部分情况会使用在有用精灵图的背景上。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css背景知识点</title> 6     <style> 7         body,p{ 8             margin:0; 9             padding:0;10         }11         .box{12             width:100%;13             height:45px;14             line-height:45px;15             background-color:#ccc;16             17         }18         p{19             width:42px;20             height:40px;21             margin:0 auto;22             background-size:50px 50px;23             background:url("focus-icon.png") no-repeat 0 -50px;24         }25     </style>26 </head>27 <body>28     <div class="box">29         <p></p>30     </div>31 </body>32 </html>
로그인 후 복사

效果图

我现在想让中间的爱心Y方向向下移动一点,我给p标签加上padding-top:10px;

效果如下

它并没有向下移动而是高度多出了一些,如果你理解了我上面说的,那你应该可以理解这个。

之所以会这样是因为背景包括了padding。但是我们现在并不想这样,那就可以用css3的属性background-clip,这是一个裁剪属性

加上background-clip:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。

应该懂了吧?

那么background-origin什么意思呢?

 

不知道你们有没有方向一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。

如果你想改变它的位置就可以使用background-oringin

如果想从中间开始,那就设置成background-oringin:content-box;

当然还有其他的一些属性,你们可以去网上查一下。

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿