<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>.box1{width: 500px;height: 500px;/* background-color 设置背景颜色*/background-color: #bfa;/* background-image 设置背景图片 - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色- 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满- 如果背景的图片大于元素,将会一个部分背景无法完全显示- 如果背景图片和元素一样大,则会直接正常显示*/background-image:url("./img/1.png");/* background-repeat 用来设置背景的重复方式可选值:repeat 默认值 , 背景会沿着x轴 y轴双方向重复repeat-x 沿着x轴方向重复repeat-y 沿着y轴方向重复no-repeat 背景图片不重复*/background-repeat: no-repeat;/*background-position 用来设置背景图片的位置设置方式:通过 top left right bottom center 几个表示方位的词来设置背景图片的位置使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center通过偏移量来指定背景图片的位置:水平方向的偏移量 垂直方向变量*//* background-position: center; */background-position: -50px 300px;}</style></head><body><divclass="box1"></div></body></html>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>.box1{width: 500px;height: 500px;overflow: auto;background-color: #bfa;background-image:url("./img/2.jpg");background-repeat: no-repeat;background-position: 0 0;padding: 10px;/*设置背景的范围 background-clip 可选值:border-box 默认值,背景会出现在边框的下边padding-box 背景不会出现在边框,只出现在内容区和内边距content-box 背景只会出现在内容区background-origin 背景图片的偏移量计算的原点padding-box 默认值,background-position从内边距处开始计算content-box 背景图片的偏移量从内容区处计算border-box 背景图片的变量从边框处开始计算*//* background-origin: border-box;background-clip: content-box; *//* background-size 设置背景图片的大小第一个值表示宽度 第二个值表示高度- 如果只写一个,则第二个值默认是 autocover 图片的比例不变,将元素铺满contain 图片比例不变,将图片在元素中完整显示*/background-size: contain;/* background-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-originbackground-clipbackground-attachment- backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求,也没有哪个属性是必须写的注意:background-size必须写在background-position的后边,并且使用/隔开background-position/background-sizebackground-origin background-clip 两个样式 ,orgin要在clip的前边*/}.box2{width: 300px;height: 1000px;background-image:url('./img/1.png');background-repeat: no-repeat;background-position: 100px 100px;/* background-attachment- 背景图片是否跟随元素移动- 可选值:scroll 默认值 背景图片会跟随元素移动fixed 背景会固定在页面中,不会随元素移动*/background-attachment: fixed;}.box3{border: 10px red double;padding: 50px;width: 500px;height: 500px;background:url('./img/2.jpg') #bfa center center/contain border-box content-box no-repeat ;}</style></head><body><divclass="box3"></div><!-- <div class="box1"><div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aut, odio iusto accusantium ipsum aliquid omnis facere sapiente, nobis vel dicta alias ducimus. Repellat similique unde eius tempore, quia quo.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, accusamus quibusdam. Adipisci in dolorem qui accusantium accusamus voluptatibus magnam nesciunt minus enim quaerat! Quidem, rem. Ipsum amet praesentium enim aliquid!Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam provident repellendus ipsum dolorum optio quo, iure eveniet beatae cupiditate rerum minus corporis illum aliquam illo ut quidem aliquid expedita deserunt.</div></div> --></body></html>
效果: ShaderGraph的制作: shader中uv数和雪碧图的uv数对上就能出效果。
直接上代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class TurnDirEffectController : …
一个call for paper的站点,small推荐给我的:http://www.wikicfp.com/cfp/ 能够加入自己关注的会议,会生成对应的deadline列表。非常方面~ 还有一个是中科院的CCF推荐排名:http://www.ccf.org.cn/sites/ccf/paiming.jsp,…
2019年1月4日,蚂蚁金服ATEC城市峰会以“数字金融新原力(The New Force of Digital Finance)”为主题在上海举办。稠州银行副行长程杰、蚂蚁金服副总裁刘伟光、蚂蚁金服金融科技产品技术总监杨冰、蚂蚁金服创新科技部资深总监李杰力等出席本场…
小蚂蚁说: 2018年5月21日,国际顶级数据库会议DASFAA 2018(International Conference on Database Systems for Advanced Applications)在澳大利亚黄金海岸举办。 本文是蚂蚁金服录用于DASFAA的论文Unpack Local Model Interpretat…