欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

background-origin设置背景图像的参考原点(位置)

background-origin设置背景图像的参考原点(位置)

  • padding-box:从 padding区域(含 padding)开始显示背景图像;
  • border-box:从 border区域(含 border)开始显示背景图像;
  • content-box:从 content区域开始显示背景图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.pic{
width: 406px;
height:300px;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881365383&di=0a70eec494aaa4d38106556d913f7b4c&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-09-25%2F5ba9957dc955a.jpg) no-repeat;
border: 10px dashed skyblue;
padding: 30px;
background-size: cover;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="pic"></div>
</body>
</html>
上一篇标题:列举background属性的8个属性值(面试题)
下一篇标题:background-clip设置对象的背景图像向外裁剪的区域

相关文章

 

文章-background-origin设置背景图像的参考原点(位置)发布日期:2021-04-01 17:07作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/244.html