微信小程序之background:url属性的使用

最新推荐文章于 2025-05-13 02:29:17 发布

刺心疯

最新推荐文章于 2025-05-13 02:29:17 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_42363090/article/details/96848516

微信小程序专栏收录该内容

121 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了微信小程序中背景属性的使用，包括background-color、background-image、background-repeat、background-attachment、background-position、background-size、background-clip和background-origin等，以及文本颜色和不透明度的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.details .background{
  background-image: url('http://bmob-cdn-18655.b0.upaiyun.com/2018/05/20/0c576365406a8f4d8066aa2b1146199b.png');
  background-repeat: no-repeat;
  background-size: 350rpx;
  background-position-y: center;
  background-position-x: center;
}

1.background-color：指定背景的颜色。取值：正常的颜色取值。

2.background-image：背景图片。如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度

3.background-repeat：设置对象背景图如何铺排填充。

repeat-x：背景在横向上平铺。

repeat-y：背景在纵向上平铺。

repeat：背景图在横向纵向上平铺。

no-repeat：图像不平铺。

round：背景图像自动缩放直到适应且填充整个容器。

space：背景图像以相同的间距平铺且填充满整个容器或者某个方向。
4.background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。

取值：fixed：固定位置。scroll：相对于元素固定，跟着元素。local：相对于元素内容固定，总是跟着内容。

5.background-position: