一、背景图定位方法
1.background-position
微信截图_20190227113831.png
2.background-origin
每个元素身上都存在三个矩形框：border box（边框的外沿框）、padding box（内边距的外沿框）和 content box（内容区的外沿框）。默认情况下，background-position 是以 padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上角。
微信截图_20190227113846.png
3.calc()
微信截图_20190227141639.png
二、条纹背景
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
条纹.png
网友评论