移动端div背景图出现白边

万般浮云

于 2022-03-31 11:37:04 发布

阅读量683

点赞数

分类专栏：前端问题移动端文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Smilelifeeveryday/article/details/123867761

版权

前端问题同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

移动端问题积累

图片问题

div背景图出现白边

两个问题，一是对一张平滑长图通过切割中间一小段实现长图填充(解决长图太大的问题)，图片的填充可能导致白边出现，通过margin修复

二是直接背景图莫名出现白边，直接通过同色背景解决

.task-list {
	width: 100%;
	background: url('common-bg-min.png') no-repeat;
	background-size: 100% 100%;
	margin: -1px auto;  /* 这里 */
}

.task-item {
	width: 328px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: url('task-item.png') no-repeat;
	background-size: contain;
	background-color: #72320b;  /* 这里 */
	margin: 12px auto 0;
	padding: 4px 11px 0 21px;
}