uni

您所在的位置:网站首页 九宫格动态头像怎么做 uni

uni

#uni| 来源: 网络整理| 查看: 265

页面代码如下:

项非攻 查看个人主页和编辑资料

现在想让’photo-user’这个view做成圆形,并显示头像。步骤如下: 1.设置’photo-user’这个view的宽度。

.content .content-userinfo .userinfo-info .userinfo-info-photo .photo-user{ width: 90%; }

2.设置border-radius属性,该属性用来给盒子元素添加圆角的边框,值为50%。

.content .content-userinfo .userinfo-info .userinfo-info-photo .photo-user{ width: 90%; border-radius: 50%; }

3.设置view的背景图片。 注意:在uni-app中设置背景图片不支持本地图片,需要使用base64或网络资源!!! 这里我使用base64,推荐一个网站图片转换Base64,转换后将生成的base64拷贝出来,放入css样式中。

.content .content-userinfo .userinfo-info .userinfo-info-photo .photo-user{ width: 90%; border-radius: 50%; background-image: url('data:image/bmp;base64,Qk32EgAAAAAAADYAAAAoAAAAKAAAACgAAAABABgAAAAAAMASAADEDgAAxA4AAAAAAAAAAAAA8fP7/f3/9vb2///8/PjzPDk0HRsaREZHQEVOUFZhkpWjS0xWHhYdU0VGcl1bSTMtOSYjXU9JmYuFoZiO39nOl5eH6evYvsavnaeQ4O/U7//k7//m5/3g6f/i6v/k3fPW5/fY3u7P8f/lw9a98f/w7//1x+LS3Pnq+/3//Pz/+Pj4///89vLtv7y3SEZFREZHWVxkV11oVlplWltlOjQ5PzI0ZlFPW0dCb15bOi4qj4V+opuS5ePYlJWFhop3eoFsV2FKj56Dp7aaqLqbe41u4fPUdYpqo7WWmKmIkKCBdohrq76jdIpyqsOvc45+vdrK+fv/+fn//fr2+PXt///5eHVxICIiTVFWWV5nYGRvNjdBGxUaRTo8iXZzyLWwjoN/LSkkUE1FNTQqvb+z3uPUjZWEk5yHmKWN+//tssGissGhyNW1vMmpjZh3wM6sydq4n7OQj6SE3PLVmrOZnbqhiqaS1fPg7vD4/f3/+/bz///5///4wr+6P0A+VFdbXWNqPUJLJygyfHh9l4yOfm1qgHFuJSAdKywod3t2XmJck5uR7vjsw83A3OjWvci0zdfA5e7TuMCizdO0zdKz2t299PnZxNKwtsemxde4xty/zuTLvdW9yuXRwd3K9vj/+/7///39/vn2///4+vXs///5uru3Oj4/S09UEBUecHJ6nJidRT0+LR4bIRUTKCordXx/mJ+if4mJanVz3urkrruzSFRIfYZ5eX9u6uzYxMOuurae8OnQkIdso5+C2d7Bo6+TlKGHs8GpxtXAfI98fI+Al6yd+vz/8vX6/Pn7///8///2//7z///4///60NLSVVpdSE5VvsHJXVxgOjQ1Rzs3IBcUODxBl6GrQEtTDxshFiQqnKmr2eXl6/TxzNLN2dzT7uzh//7v+u7c8+TRg3Bbm413+/nh9vnj6O3Y193K8vzs5/Hk6vXr4+7k+fv/9Pf8/vv9///8//zz///37ung/f33/f//dnt+s7nAmZ2iGBcbQjw9PzMvFAwMGiArS1pqBRQkBxckIS48DBskGCMrbXZ6hoqLRUNCf3l008a+ppSJ/+7i//Xl///xkIZ1eXRlnJmLzszB/v3z///4///8/P/98/T4/f/+/Pjz///5///4//vy///7mpiXoaOkvsLHHSIrHSIrIygxCAoUExwqIjVQQl59bomreJSzgZ69c4+tUmuFEypAMT9ROkBLdXF34NLTdV1X//Ln//3t8s68m39ucFlJk4Nz///z//jx///8xcLEsLG1//31///5/v74///7//75//n0//351s3JTEVC9fDxYGNoCBEeBRgtABQyO1t/a5C8hrLng7PtfrDsdqzodq7peLLtfLTrgbLiZ461J0FfW2V32dLXfGReqoN0/9a++MGmypZ4nm9Tk29X//Xk///36uXkSEdQXWBu///3/v3z/f71+/z4/vz7//z7//7+PDUympGO1tHSIyYuChgqEy1LcpjCeandfLLuda7sdK7vcK3vbq/zc7r9fcT/d779cbHrib/ugajOQlhx+Pz/tqelqop9vpN+47CW9r2evYdpq4Jr//Pj/fHr8vH1Wl5wYmt/+Pvy///7/f/8+Pr6+Pr7/fz++fb4Uk9Rwr2/1tbcERkmMENYl7fah7Pidq3mYp7ZWpb


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3