diff --git a/pages/CSS/background/background-image.uvue b/pages/CSS/background/background-image.uvue
index 8758c5cf5817f4ce63fd4ac5d428b8d1ccce7103..0de26af4879387773fda588f9ae069b65d44183f 100644
--- a/pages/CSS/background/background-image.uvue
+++ b/pages/CSS/background/background-image.uvue
@@ -1,15 +1,23 @@
 <template>
-	<view style="flex-grow: 1;">
+	<scroll-view>
 		<view>
 			<text>不支持背景图片，仅支持linear-gradient方法</text>
-			<text>background-image: linear-gradient(to right, red, yellow)</text>
-			<view class="common" style="background-image: linear-gradient(to right, red, yellow);"></view>
+				<view v-for="(direction) in directionData">
+					<text>background-image: linear-gradient({{direction}}, red, yellow)</text>
+				<view class="common" :style="{'background-image': 'linear-gradient('+direction+', red, yellow)'}"></view>
+      </view>
 		</view>
-	</view>
+	</scroll-view>
 </template>
 
 <script>
-
+  export default {
+    data(){
+      return {
+        directionData: ['to right', 'to left', 'to bottom', 'to top', 'to bottom left', 'to bottom right', 'to top left', 'to top right']
+      }
+    }
+  }
 </script>
 
 <style>
@@ -17,4 +25,4 @@
 		width: 500rpx;
 		height: 500rpx;
 	}
-</style>
\ No newline at end of file
+</style>