为什么加上“no-repeat”后“border-clip”显示就不正常了

z_l_z 2017-12-27

源自：CSS3背景与渐变 2-2 背景图像区域（ background-clip）

收起

4回答

小丸子爱吃菜 2017-12-27 17:37:17

border-box 背景被裁剪到边框盒。

显示的没有问题啊~

收起回答

提问者 z_l_z #1

明白了，谢谢老师

2017-12-27 17:39:23
小丸子爱吃菜回复提问者 z_l_z #2

你跟老师源码写的不一样，所以看到的效果会有所不同，你再去看看老师的源码

2017-12-27 17:46:46

小丸子爱吃菜 2017-12-27 17:30:44

这边测试你的代码，显示如下

//img1.sycdn.imooc.com//climg/5a436834000105d908740770.jpg

收起回答

提问者 z_l_z #1

只有 background-clip: border-box;显示不对。后面两个 padding-box、 content-box没有问题。

2017-12-27 17:33:00
提问者 z_l_z #2

加上no-repeat后，= border-box时上、下、右边框下没有图，只有右边框下能看到图。

2017-12-27 17:34:51

提问者 z_l_z 2017-12-27 16:58:02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
div{width: 500px; height: 500px; font-size: 30px;
      text-align: center; line-height: 500px;
      padding: 50px; margin:50px;
      border: 50px solid rgba(255,0,0,0.5);
      background: url('../images/banner3.jpg') no-repeat;
      background-clip: border-box;
      background-clip: padding-box;
      background-clip: content-box;
     }
</style>
</head>
<body>
<div>用backgruond-clip设置背景图像</div>

</body>
</html>

收起回答

小丸子爱吃菜 2017-12-27 16:51:32

请将你的代码粘贴上来，我们需要运行一下你的代码，调试并找到问题所在。

祝学习愉快！

收起回答

提问者 z_l_z #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS背景</title> <style> div{width: 500px; height: 500px; font-size: 30px; text-align: center; line-height: 500px; padding: 50px; margin:50px; border: 50px solid rgba(255,0,0,0.5); background: url('../images/banner3.jpg') no-repeat; background-clip: border-box; background-clip: padding-box; background-clip: content-box; } div.size{ background-size: 100%; } } </style> </head> <body> <div>用backgruond-clip设置背景图像</div> </body> </html>

2017-12-27 16:59:05