backgrounds.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /* #ifndef APP-NVUE */
  2. // 背景固定
  3. .#{$prefix}bg-fixed {
  4. background-attachment: fixed;
  5. }
  6. .#{$prefix}bg-local {
  7. background-attachment: local;
  8. }
  9. .#{$prefix}bg-scroll {
  10. background-attachment: scroll;
  11. }
  12. // 背景裁剪
  13. .#{$prefix}bg-clip-border {
  14. background-clip: border-box;
  15. }
  16. .#{$prefix}bg-clip-padding {
  17. background-clip: padding-box;
  18. }
  19. .#{$prefix}bg-clip-content {
  20. background-clip: content-box;
  21. }
  22. /* #endif */
  23. // 背景颜色
  24. .#{$prefix}bg-transparent {
  25. background-color: transparent;
  26. }
  27. /* #ifndef APP-NVUE */
  28. .#{$prefix}bg-current {
  29. background-color: currentColor;
  30. }
  31. /* #endif */
  32. .#{$prefix}bg-000,
  33. .#{$prefix}bg-black {
  34. background-color: #000;
  35. }
  36. .#{$prefix}bg-fff,
  37. .#{$prefix}bg-white {
  38. background-color: #fff;
  39. }
  40. @for $i from 1 through 9 {
  41. .#{$prefix}bg-#{$i * 111} {
  42. background-color: unquote("##{$i * 111}");
  43. }
  44. }
  45. /* #ifndef APP-NVUE */
  46. // 背景颜色不透明度
  47. // 背景图像位置
  48. .#{$prefix}bg-bottom {
  49. background-position: bottom;
  50. }
  51. .#{$prefix}bg-center {
  52. background-position: center;
  53. }
  54. .#{$prefix}bg-left {
  55. background-position: left;
  56. }
  57. .#{$prefix}bg-left-bottom {
  58. background-position: left bottom;
  59. }
  60. .#{$prefix}bg-left-top {
  61. background-position: left top;
  62. }
  63. .#{$prefix}bg-right {
  64. background-position: right;
  65. }
  66. .#{$prefix}bg-right-bottom {
  67. background-position: right bottom;
  68. }
  69. .#{$prefix}bg-right-top {
  70. background-position: right top;
  71. }
  72. .#{$prefix}bg-top {
  73. background-position: top;
  74. }
  75. // 背景图像重复
  76. .#{$prefix}bg-repeat {
  77. background-repeat: repeat;
  78. }
  79. .#{$prefix}bg-repeat-x {
  80. background-repeat: repeat-x;
  81. }
  82. .#{$prefix}bg-repeat-y {
  83. background-repeat: repeat-y;
  84. }
  85. .#{$prefix}bg-repeat-round {
  86. background-repeat: round;
  87. }
  88. .#{$prefix}bg-repeat-space {
  89. background-repeat: space;
  90. }
  91. // 背景图像大小
  92. .#{$prefix}bg-auto {
  93. background-size: auto;
  94. }
  95. .#{$prefix}bg-cover {
  96. background-size: cover;
  97. }
  98. .#{$prefix}bg-contain {
  99. background-size: contain;
  100. }
  101. // 背景图像原点
  102. .#{$prefix}bg-origin-border {
  103. background-origin: border-box;
  104. }
  105. .#{$prefix}bg-origin-padding {
  106. background-origin: padding-box;
  107. }
  108. .#{$prefix}bg-origin-content {
  109. background-origin: content-box;
  110. }
  111. /* #endif */