css3中的背景图片问题

css3中的背景图片问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>background-origin</title>
    </head>
    <style type="text/css">
        div{
            margin: 0 auto;
            width: 300px;
            height: 100px;
            border: 10px rgba(0, 0, 255,0.2) solid;
            padding: 10px;
            background: url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat;
            background-clip: content-box;
        }
    </style> 
    <body>
        <div></div>
    </body>
</html>

为什么上和左边框没有被背景图片覆盖?

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学如果想要实现边框覆盖图片,则需要设置如下:

http://img1.sycdn.imooc.com//climg/5d60a9ac0001f0a218130710.jpg

希望可以帮到你!

卡布琦诺 2019-08-24 10:46:00

“weixin_慕的地5241954”同学给出的原因和解决办法,同学可以参考哦,掌声鼓励一下“weixin_慕的地5241954”同学,棒棒哒!

  • 我把background-clip: content-box;换成background-clip: border-box;后还是没有覆盖上和左边框背景图片?
    2019-08-24 10:56:55
提问者 weixin_慕的地5241954 2019-08-23 23:03:22

background-clip: content-box;这里写错了,是background-clip: border-box;

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师