为什么这样写图片不会从边框开始显示？

<!DOCTYPE html>

<html>

<head>

div{

border:10px solid rgba(255,0,0,0.5);

width: 200px;

height: 200px;

background-clip: border-box;

background:url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat ;

}

</style>

</head>

<body>

</body>

</html>

源自：CSS3背景与渐变 2-7 编程练习

收起

1回答

好帮手慕星星 2019-05-10 11:31:50

你好，这样图片就是被裁剪到边框显示的，如果想要左侧和上面边框也显示图片的话，可以添加background-origin属性，如下：

单个属性一般会放在简写的下面，否则有可能会被默认的覆盖。

可以测试下，祝学习愉快！

提问者白中白盖中盖 #1

那老师裁剪到边框显示是默认显示右边框和下边框对吗？那裁剪到内边距和内容显示是全部显示？

2019-05-10 11:35:45
好帮手慕星星回复提问者白中白盖中盖 #2

是因为给div设置的宽高不够，所以显示在了右边框和下边框上，如果设置宽高够了就不会显示在边框上了，需要添加上面background-origin属性。裁剪到内边距和内容显示是不会在边框上的，容器宽高不够的话也不会显示完整。

2019-05-10 16:16:15