你的IDEA启动图怎么跟我们的不一样啊???(续)

前言

前几天发了一篇文章,给大家分享了一下,如何更换idea的启动图,没想到一个点赞都没有,好难瘦~
今天再给大家分享下怎么样在不会PS的情况下,处理启动图

先看下效果图

image.png

  • 左边部分是效果预览
  • 右边部分是对页面素材内容的一些配置
  • 后续如果还有时间的话,会出一个拖拽版本的

1.页面结构

使用flex弹性布局将页面分为等宽的两部分,左边是画布容器(使用的svg,没有使用canvas),右边是素材配置

image.png

2.SVG画布

可以看到svg下面的两个image标签都是空的,因为没有使用CDN加载图片,本地是将图片转成base64处理的

<svg id="svg" width="640" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 400"
      xmlns:xlink="http://www.w3.org/1999/xlink">
          <image id="image" xlink:href="" width="100%" height="100%" x="0" y="0" visibility="visible" preserveAspectRatio="none"/>
          <text id="title" x="72" y="102" style="fill:#fff; font-weight: bold; font-size:36px; letter-spacing:-2px">IntelliJ IDEA</text>
          <text id="subTitle" x="74" y="123" style="fill:#fff; font-weight: bold; font-size:12px; letter-spacing: 0.5px">Ultimate 2021.2</text>
          <image width="50" height="50" id="logo" x="540" y="296" xlink:href="" visibility="visible" preserveAspectRatio="none"/>
      </svg>

注意:图片(image)标签需要增加preserveAspectRatio属性,来处理图片拉伸铺满问题,如果使用的图片,不是对应比例的图片,拉伸也会变形,可以将preserveAspectRatio属性去掉

3.From

<div class="form">
        <div class="form-sub">
          <div class="form-sub-title">图片属性</div>
          <div class="form-item">
            <label>背景图片</label>
            <button class="button img_upload_btn">选择图片</button>
            <input type="file" name="file" class="img_upload" accept="image/gif, image/jpeg,image/x-png" style="display: none;"/>
            <span class="form-tip">选择jpeg或png格式的图片</span>
          </div>
          <div class="form-item">
            <label>图片宽高</label>
            <div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
              <input type="text" name="width" class="form-input" value="640" placeholder="图片宽度" style="width:230px"/>
              <input type="text" name="height" class="form-input" value="400" placeholder="图片高度" style="width:230px"/>
            </div>
          </div>
          <div class="form-item">
            <label>不透明度</label>
            <input type="text" name="opacity" class="form-input" placeholder="不透明度" value="1"/>
          </div>
        </div>
        
        <div class="form-sub">
          <div class="form-sub-title">主标题</div>
          <div class="form-item">
            <label>主标题
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值