巧用css规定背景绘制区域-前端问答-PHP中文网

巧用css规定背景绘制区域

醉折花枝作酒筹

发布： 2021-08-12 17:41:08

原创

2223人浏览过

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

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

首先来看一个小例子。

  <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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2349">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176049839127300.png" alt="Gaga">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2349">Gaga</a>
                            <p>曹越团队开发的AI视频生成工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Gaga">
                                <span>1151</span>
                            </div>
                        </div>
                        <a href="/ai/2349" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Gaga">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</body>

登录后复制

这个小例子的结果是

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

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

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

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

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

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

推荐学习：css视频教程

以上就是巧用css规定背景绘制区域的详细内容，更多请关注php中文网其它相关文章！