首页 > 解决方案 > 不允许重复的背景图像 - CSS LINT

问题描述

我有以下 CSS 旨在显示所有浏览器的背景图像:

.single-product.postid-92613 .site-content, .single-product.postid-92613 header#masthead, .single-product.postid-92613 .site-footer, .single-product.postid-92613 .sfb-footer-bar {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .1)), to(rgba(0, 0, 0, .3))), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3)), url("/wp-content/uploads/2020/08/pic.jpg")!important;
  background-attachment: fixed!important;
  background-size: cover!important;
  background-position: 100% 0!important;}

background-imageCSS lint 给出了一个被多次调用的警告。有什么办法可以防止这种情况发生吗?

标签: csswordpress

解决方案


还要在 CSS 中添加:

background-repeat:no-repeat;

推荐阅读