首页 相册和上传


相册上传
预览效果
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-upload-photo-list">
    <div class="ul-upload-photo-item">
        <div class="ul-upload-photo-delete layui-icon layui-icon-delete"></div>
        <div class="ul-upload-photo-main" style="background-image: url('/static/images/view.jpg');"></div>
    </div>
    <div class="ul-upload-photo-item ul-upload-photo-button"></div>
</div>

.ul-upload-photo-list {}

.ul-upload-photo-item {
    display         : inline-block;
    width           : 120px;
    height          : 120px;
    margin          : 5px;
    background-color: #ddd;
    cursor          : pointer;
    box-shadow      : 0 3px 5px #999;
    position        : relative;
}

.ul-upload-photo-main {
    background-size    : cover;
    background-position: center;
    width              : 100%;
    height             : 100%;
}

.ul-upload-photo-delete {
    position   : absolute;
    right      : 5px;
    top        : 5px;
    z-index    : 999;
    font-size  : 20px;
    color      : #fff;
    text-shadow: 0 0 2px #000;
}

.ul-upload-photo-button {
    background-image   : url("img/upload.png");
    background-size    : cover;
    background-position: center;
}
.ul-upload-photo-item {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 5px;
  background-color: #ddd;
  cursor: pointer;
  box-shadow: 0 3px 5px #999;
  position: relative;
}
.ul-upload-photo-main {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
.ul-upload-photo-delete {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 999;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
.ul-upload-photo-button {
  background-image: url("img/upload.png");
  background-size: cover;
  background-position: center;
}
<view class="ul-upload-photo-list">
    <view class="ul-upload-photo-item">
        <view class="ul-upload-photo-delete layui-icon layui-icon-delete"></view>
        <view class="ul-upload-photo-main" style="background-image: url('/static/images/view.jpg');"></view>
    </view>
    <view class="ul-upload-photo-item ul-upload-photo-button"></view>
</view>