巧用css规定背景绘制区域


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

上一篇文章中我们了解了将背景图像固定在视口的方法,请看《巧用css将背景图像固定在视口》。这次我们来了解一下规定背景绘制区域的方法,有需要的可以参考参考。

当我们对背景有其他要求的时候,应该怎么去做呢?

首先来看一个小例子。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    div{

      background-color: cornsilk;

      width: 300px;

      height: 300px;

      background-clip:content-box;

      padding:50px;

      border: 2px solid #ccc;

    }

  </style>

</head>

<body>

  <div>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

<p>为了显示,表明这个一个div元素</p>

<p>为了显示,表明这个一个p元素</p>

</div>

</body>

这个小例子的结果是

2LNW)F)DSCD$VCDEBC0C8`K.png

我们可以看到这个例子里背景颜色并没有将这个盒子完全填充,这是怎么回事呢?回头去看看代码,原来我们使用了background-clip:content-box;

那我们就来看一个这个属性吧。

background-clip属性规定背景的绘制区域,它设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

如果没有设置背景图片(background-image)或背景颜色(background-color),那么这个属性只有在边框(border)被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与border-styleborder-image有关),否则,本属性产生的样式变化会被边框覆盖。

在这个属性的值有四个,分别是border-boxpadding-boxcontent-boxtext。其中border-box的意思是背景延伸至边框外沿(但是在边框下层);padding-box的意思是背景延伸至内边距(padding)外沿。不会绘制到边框处;content-box的意思是背景被裁剪至内容区(content box)外沿;text的意思是背景被裁剪成文字的前景色。

推荐学习:css视频教程

以上就是巧用css规定背景绘制区域的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css如何实现开关效果

css文本对齐属性的取值有几种

css怎么设置字体发光效果

css伪类分为哪几种

html5中一些可以优化的细节介绍

jquery怎么改变css样式

css宽高不固定如何实现居中

一招搞定css相对原点定位背景图片

css border属性怎么用

css rotation属性怎么用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...